获取所有值表行输入框

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。