동적 키 이름을 가진 Reactjs setState ()? 동적 키 이름을 사용하는

편집 : 이것은 중복입니다, 여기를 참조 하십시오

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

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

여기서 event.target.id는 업데이트 할 상태 키로 사용됩니다. 이것이 React에서 가능하지 않습니까?

답변

@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 });
},

답변

다음과 .map같은 작업으로 루프에서 :

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

[]in type매개 변수에 유의하십시오 . 도움이 되었기를 바랍니다 🙂

답변

나는 비슷한 문제가 있었다.

두 번째 수준 키가 변수에 저장된 상태를 설정하고 싶었습니다.

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

그러나 이것은 유효한 구문이 아닙니다.

이것을 달성하기 위해 다음 코드를 사용했습니다.

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

답변

ES6 +를 사용하면 [ ${variable}] 만하면됩니다