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

Question

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

渲染方法：

    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})
    });
  }

我想在其中一个输入更改时设置对象的新状态。期望的结果是获取输入值并将其设置为 name 键作为 tasks 对象中的值。

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

感谢您的帮助， 雅库布

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 })
    });
  }

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

---

使用破坏而不是 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
          }
      }
    });
  }