상태를 설정할 때 동적 키 이름을 사용하는 예를 찾을 수 없습니다. 이것이 내가하고 싶은 일입니다.
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}] 만하면됩니다
