동적 키 이름으로 reactjs setState()?

동적 키 이름으로 reactjs setState()?

편집: 복제입니다. 여기를 참조하십시오.

상태를 설정할 때 동적 키 이름을 사용하는 예를 찾을 수 없습니다.이것이 내가 하고 싶은 일이다.

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

여기서 event.target.id은 갱신되는 스테이트키로서 사용됩니다.리액트에서는 불가능합니까?

@Cory의 힌트 덕분에 다음과 같이 했습니다.

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

ES6 또는 Babel 트랜스필러를 사용하여 JSX 코드를 변환하는 경우 계산된 속성 이름으로도 이 작업을 수행할 수 있습니다.

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

여러 개의 제어된 입력 요소를 처리해야 할 경우 각 요소에 이름 속성을 추가하여 핸들러 함수가 event.target.name 값을 기반으로 수행할 작업을 선택할 수 있습니다.

예를 들어 다음과 같습니다.

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}

내가 어떻게 이 일을 해냈는지...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

덧붙이고 싶은 것은 디구조화를 사용하여 코드를 리팩터링하여 더 깔끔하게 보이게 할 수도 있다는 것입니다.

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

따옴표 문자에 유의하십시오.

저도 비슷한 문제가 있었어요.

변수에 두 번째 레벨 키가 저장되어 있는 상태를 설정하고 싶었습니다.

예.this.setState({permissions[perm.code]: e.target.checked})

그러나 이것은 올바른 구문이 아닙니다.

이를 위해 다음 코드를 사용했습니다.

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

와 연계하여.map다음과 같이 동작합니다.

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

주의:[]에type파라미터를 지정합니다.이것이 도움이 되기를 바랍니다:)

저는 예쁘고 간단한 솔루션을 찾고 있었는데, 다음과 같은 사실을 발견했습니다.

this.setState({ [`image${i}`]: image })

도움이 되었으면 좋겠다

ES6+에서는, 다음의 조작을 실시할 수 있습니다.${variable}]

지정된 요소가 객체인 경우:

handleNewObj = e => {
        const data = e[Object.keys(e)[0]];
        this.setState({
            anykeyofyourstate: {
                ...this.state.anykeyofyourstate,
                [Object.keys(e)[0]]: data
            }
        });
    };

도움이 되기를 바라다

사전이 있는 상태가 다른 값을 잃지 않고 일부 키를 업데이트합니다.

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

솔루션은 다음과 같습니다.

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

여기서 키 "페이지" 값을 값 5로 업데이트합니다.

이거 한 번 써보세요.

상태는 여기에 예시되어 있습니다.

 this.state = {
            name: '',
            surname: '',
            username: '',
            email: '',
  }

온체인지 기능이 있습니다.

onChangeData = (type, event) => {
    const stateData = this.state;
    if (event === "" || event === "Seçiniz")
        stateData[type] = undefined
    else
        stateData[type] = event

    this.setState({ stateData});
}

다음과 같은 확산 구문을 사용할 수 있습니다.

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},

언급URL : https://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name