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

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

输入名称不必是唯一在这种情况下，该指数将提供“独特性”。

---

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