すべての値を取得するテーブル行の入力ボックス

Question

私は反応が新しく、テーブルの行の入力ボックスの値を取得するのにいくつかの困難があります。私は、フォーム、テーブルを持っているし、すべてのボタンを救う私のrenderメソッドで

、

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

Iのレンダリングメソッドた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を割り当てる方法に問題があります：

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でデータを格納します。