獲取所有值錶行輸入框

Question

我是新的反應，我有一些困難檢索表中的行的輸入框的值。

在我的渲染方法，我有一個表格，表格並保存所有按鈕，

render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 

     { (this.state.inputList.length > 0) ? 
     (<div> 
      <table id='configtable'> 

      <tbody> 
       {this.state.inputList} 
      </tbody> 
      </table> 

      <table id="table-footer"> 
      <tfoot> 
      <tr> 
       <td /> 
       <td> 
       <input name="fwdAllNumber" type="number" placeholder="Phone Number" pattern="[0-9]*" inputMode="numeric" onChange={this.handleFwdAllInput}/> 
       </td> 
       <td> 
       <ButtonGroup className="button-group-right"> 
       <Button className="config-button" type="submit" value="Submit" onClick={this.saveAll}>Save All</Button> 
       </ButtonGroup> 
       </td> 
      </tr> 

      </table> 
      </div> 
     ) : (<div><br/><h4>No Phone Numbers currrently exist. Please click "Add Phone Number" to begin</h4></div>)} 
     </form> 
     </div> 
    ) 
    } 
    }) 

addRow方法添加行「添加行」按鈕

addRow(event) { 
    const inputList = this.state.inputList; 
    const index = this.state.index; 
    let rows = this.state.rows; 

    const row = (
     <tr key={ inputList.length } name={ inputList.length }> 
     <td key={index}><input name={'phone_'+index} type="number" placeholder="Foward Phone Number" pattern="[0-9]*" inputMode="numeric" ref={(input) => this.phone_$index = input} type="text"/> </td> 
     <td><input name={'fwd_'+index} type="number" placeholder="Foward Phone Number" pattern="[0-9]*" inputMode="numeric" ref={(input) => this.fwd_$index = input} /></td> 
      <td id="forwarded-indicator"> 
      <div id="forwarded-indicator-div" /> 
     </td> 
     </tr> 
    ); 
} 

我的渲​​染方法onPress當我點擊saveAll按鈕時，需要獲取所有行中所有輸入框的值。

我試過，

handleSubmit: function(event) { 
    event.preventDefault(); 
    let rows = this.state.rows; 
    const tableValues = this.state.inputValueList; 

    let configVal = []; 
    for(let i = 0; i < rows.length; i++){ 
    console.log(this.phone_ + i.value); 
    } 
}, 

但我在這裏得到楠和控制檯我得到的，

<input type="text" name="phone_0" placeholder="Foward Phone Number" pattern="[0-9]*" inputmode="numeric"> 
<!-- react-text: 162 --> 
<!-- /react-text --> 

我會很感激，如果有人可以幫助我的onsubmit 謝謝

Answer 1

問題在於您在此處分配參考輸入元素的方式：

ref={(input) => this.fwd_$index = input} 

使用此：

ref={(input) => this[`fwd_${index}`] = input} 

然後利用獲取價值：

this[`fwd_${index}`].value 

檢查工作示例：

class App extends React.Component{ 
 

 
    submit(e){ 
 
     e.preventDefault(); 
 
     for(let i=0; i< 4; i++) 
 
     console.log('value', this[`input_${i}`].value); 
 
    } 
 

 
    render(){ 
 
     return(
 
     <form onSubmit={this.submit.bind(this)}> 
 
      { 
 
       [1,2,3,4].map((el,i) => <input ref={inp => this[`input_${i}`] = inp} key={i}/>) 
 
      } 
 
      <input type='submit'/> 
 
     </form> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

input{ 
 
    display: block; 
 
    margin-bottom: 20px; 
 
}

<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> 
 

 
<div id='app'/>

建議：

使用多個ref代替，使用controlled component和將數據存儲在狀態變量，We should avoid the use of ref。