Question

我正在尝试设置动态生成的输入的状态。我要设置新状态的初始任务对象如下所示：

渲染方法：

    render(){
    return(
      <div>
        <main className="content">
          <form onSubmit={this.onSubmit}>

            <div>
              {Object.keys(this.state.dataGoal).map( (key, index) => {
                  return <div key={key}>
                            <label>{this.state.dataGoal[key]}</label>

                            <div className="input-wrap">

                                <input
                                  type="text"
                                  name={`${key}-task-${index}`}
                                  value={this.state.tasks[key]}
                                  onChange={this.handleInputChange} />

                            </div>
                         </div>;
              })}
            </div>

            <div className="input-wrap">
               <input
                 className="primary-btn"
                 type="submit"
                 value="Set my goal!"
                 onClick={this.formReset} />
             </div>
           </form>
        </main>
      </div>
    );
  }

最后是handleInputChanged函数：

  handleInputChange = (e) => {
    const value = e.target.value;
    const name = e.target.name;

    this.setState({
      tasks: Object.assign({}, this.state.tasks, {[name]: value})
    });
  }

我想在其中一个输入发生变化时设置新的对象状态。所需的结果是获取输入值并将其设置为名称键作为任务对象中的值。

我还想询问输入名称是否必须是唯一的。

感谢您的帮助，的Jakub

Answer 1

这看起来就像你在正确的道路上，唯一缺少的是我们必须告诉handleInputChange我们想要在任务中更新哪个索引。我们必须使用Object.assign两次，因为它是嵌套结构。在这种情况下，如果我们假设dataGoal的索引与tasks匹配，我们可以传入map函数提供的索引。

在我们的渲染功能中：

<input
       type="text"
       name={`${key}-task-${index}`}
       value={this.state.tasks[key]}
       onChange={(e) => this.handleInputChange(e, index)} /> 

// Notice: This will cause a performance hit
// We are binding 'this' using fat arrow every render but it shows the idea

处理输入：

  handleInputChange = (e, index) => {
    const value = e.target.value;
    const name = e.target.name;
    const tasks = this.state.tasks;
    const updatedTask = Object.assign({}, tasks[index], { [name]: value });

    this.setState({
      tasks: Object.assign({}, tasks, { [index]: updatedTask })
    });
  }

输入名称在这种情况下不必是唯一的，因为索引将提供“唯一性”。

使用destruct而不是Object.assign：

  handleInputChange = (e, index) => {
    const value = e.target.value;
    const name = e.target.name;

    this.setState({
      tasks: {
          ...this.state.tasks,
          [index]: {
             ...this.state.tasks[index],
             [name]: value
          }
      }
    });
  }

React - 对象分配多个动态输入值

1 个答案: