问题描述

我正在使用许多输入动态构建一个组件，我需要处理这些输入上的 onChange ...

所以我厌倦的是为每个输入控件设置一个名称，然后在 onChange 调用中设置一个具有该控件名称的状态变量，然后从状态中使用它来填充输入控件的“值”属性：

else if (element.Type === TEXT) {
                elements.push(
                    <td className="view-cell" align="left">
                        {element.Name}<br/>
                        <Input  key={element.Id}
                                name={element.Name.toLowerCase().replace(" ","")}
                                // label={element.Name}
                                // defaultValue={element.Value}
                                value={this.state.valueOf(element.Name.toLowerCase().replace(" ",""))}
                                disabled={!element.Editable}
                                onChange={(e) => {
                                    this.onInputValueChange(e)
                                }}
                        />
                    </td>
                )
            }



onInputValueChange(e) {
        this.setState({[e.target.name]: e.target.value})

        console.log(this.state.valueOf(e.target.name))
}

但是我可以看到状态没有更新为我试图通过输入名称动态添加的新值！

我怎样才能实现它？

更新

当我尝试从控制台访问状态值时，我得到：

标签： reactjs

我注意到您的代码中有两件事：

您正在尝试从valueOf状态变量中获取值。但是您缺少valueOf在 onchange 处理程序中设置对象中的值。如果添加缺少的位，应该没问题。

onInputValueChange(e) {
   this.setState({
    [e.target.name]: e.target.value
   }, () => {
     console.log(this.state[e.target.name]);
     // use [] to access value instead of ()
   });
}

此外，您必须使用方括号 [] 表示法从对象动态访问值。

if (element.Type === TEXT) {
   const inputName = element.Name.toLowerCase().replace(" ","");
   elements.push(
    <td className="view-cell" align="left">
    {element.Name}<br/>
    <Input
      key={element.Id}
      name={inputName}
      label={element.Name}
      defaultValue={element.Value}
      value={this.state[inputName]}
      disabled={!element.Editable}
      onChange={this.onInputValueChange}
    />
  )
}

这应该可以解决您的问题。

reactjs - React - 如何设置动态构建的许多输入控件的值？

问题描述

更新

解决方案

推荐阅读