javascript - 获取表格行输入框的所有值

Question

我是 react 新手，在检索表中行的输入框的值时遇到一些困难。

在我的渲染方法中，我有一个表单、表格和“保存所有”按钮，

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方法向“添加行”按钮的渲染方法onPress添加一行

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

当我点击“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);
  }
},

但是我在这里得到了 Nan，并且在控制台上得到了，

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

如果有人能帮助我提交，我将非常感激谢谢

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