동적 키 이름을 가진 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}] 만하면됩니다

나는 예쁘고 간단한 해결책을 찾고 있었고 이것을 발견했습니다.

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

도움이 되었기를 바랍니다

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

따옴표 문자를 명심하십시오.

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

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

해결책은 다음과 같습니다

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

여기에서 "페이지"키의 값을 값 5로 업데이트하십시오.

다음과 같은 스프레드 구문을 사용할 수 있습니다.

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