编辑:这是重复,请参阅here
我在设置状态时找不到使用动态密钥名称的任何示例 . 这就是我想要做的:
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 transpiler来转换JSX代码,您也可以使用computed property names完成此操作:
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 }); }
当您需要处理多个受控输入元素时,可以为每个元素添加name属性,并让处理函数根据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 像这样工作:
.map
{ dataForm.map(({ id, placeholder, type }) => { return <Input value={this.state.type} onChangeText={(text) => this.setState({ [type]: text })} placeholder={placeholder} key={id} /> }) }
请注意 type 参数中的 [] . 希望这可以帮助 :)
type
[]
可以使用扩展语法,如下所示:
inputChangeHandler : function (event) { this.setState( { ...this.state, [event.target.id]: event.target.value } ); },
6 回答
感谢@ Cory的提示,我使用了这个:
如果使用ES6或Babel transpiler来转换JSX代码,您也可以使用computed property names完成此操作:
当您需要处理多个受控输入元素时,可以为每个元素添加name属性,并让处理函数根据event.target.name的值选择要执行的操作 .
例如:
我是如何完成这个的......
只是想补充一点,你也可以解构,重构代码并让它看起来更整洁 .
循环使用
.map
像这样工作:请注意
type
参数中的[]
. 希望这可以帮助 :)可以使用扩展语法,如下所示: