reactjs如何正確處理輸入數組上的值更改

我在reactJs中創建了此表單發票註冊。reactjs如何正確處理輸入數組上的值更改

表單應處理的輸入陣列（標有紅色輪廓）。每當onChange事件發生在輸入上。所有輸入都接收到相同的值。如何正確處理這個問題？我打算使用此輸入值生成如下數據：

[ 
    { 
     invoice_number:102947303364, 
     invoice_registration_no : 1235 
    }, 
    { 
     invoice_number:102947109177, 
     invoice_registration_no : 6578 
    }, 
]

在此先感謝您的幫助。

來源

2017-08-10 Denny Rachmadi

它看起來像你綁定的保證，而不是價值 –

我不知道哪個是DB中的主鍵，所以我認爲invoice_number是主鍵。

class CustomList extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.handleInputChange = this.handleInputChange.bind(this); 
 
    this.renderList = this.renderList.bind(this); 
 
    
 
    this.state = { 
 
     data: [ 
 
      { 
 
       invoice_number:102947303364, 
 
       invoice_registration_no : 1235, 
 
       some_value: '', 
 
      }, { 
 
       invoice_number:102947109177, 
 
       invoice_registration_no : 6578, 
 
       some_value: '', 
 
      }, 
 
     ], 
 
    } 
 
    } 
 
    
 
    handleInputChange(e){ 
 
    const {id, value} = e.target; 
 
    let {data} = this.state; 
 
    const targetIndex = data.findIndex(datum => { 
 
     return datum.invoice_number == id; 
 
    }); 
 

 
    if(targetIndex !== -1){ 
 
     data[targetIndex].some_value = value; 
 
     this.setState({data}); 
 
    } 
 
    } 
 
    
 
    renderList() { 
 
     const {data} = this.state; 
 
     let content = data.map(datum => { 
 
     return (
 
      <li id={datum.invoice_number}> 
 
      <p>{datum.invoice_number}</p> 
 
      <input type="text" id={datum.invoice_number} value={datum.some_value} 
 
       onChange={this.handleInputChange}/> 
 
      </li> 
 
     ) 
 
     }); 
 
     return (
 
     <ul> 
 
      {content} 
 
     </ul> 
 
    ) 
 
    } 
 
    
 
    render() { 
 
    const myList = this.renderList(); 
 
    return (
 
     <div> 
 
     {myList} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(
 
    <CustomList/>, 
 
    document.getElementById('root') 
 
)

<html> 
 
    <body> 
 
    <div id="root"></div> 
 
    </body> 
 
</html> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

你需要看到的是handleInputChange方法結合CustomList類和renderList。

我只是在每個輸入設置id屬性爲invoice_number，並使用Array.prototype.findIndex找到更改的輸入索引。

來源

2017-08-10 04:41:10 HyeonJunOh

你也可以這樣聲明'handleInputChange'： 'handleInputChange =（）=> {...}'。那麼你不需要以這種醜陋的方式來綁定它們：D – Nocebo

@Nocebo事實上，我通常使用ES6語法的':: this.method'來將方法綁定到類。但堆棧溢出不支持ES6，所以我習慣性地這樣寫。謝謝你告訴我！ – HyeonJunOh

哦，我明白了。是啊只是試圖幫助;）有一個愉快的一天:) – Nocebo

reactjs如何正確處理輸入數組上的值更改

回答

相關問題