首页 文章

Reactjs setState()具有动态密钥名称?

提问于
浏览
163

编辑:这是重复,请参阅here

我在设置状态时找不到使用动态密钥名称的任何示例 . 这就是我想要做的:

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

其中event.target.id用作要更新的状态键 . 这在React中不可能吗?

6 回答

  • 36

    感谢@ 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 });
    }
    
  • 80

    当您需要处理多个受控输入元素时,可以为每个元素添加name属性,并让处理函数根据event.target.name的值选择要执行的操作 .

    例如:

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

    我是如何完成这个的......

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

    只是想补充一点,你也可以解构,重构代码并让它看起来更整洁 .

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

    循环使用 .map 像这样工作:

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

    请注意 type 参数中的 [] . 希望这可以帮助 :)

  • -3

    可以使用扩展语法,如下所示:

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

相关问题