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