[英]Get all values table row input boxes
I am new to react and I have some difficulties retrieving the values of input boxes of the rows in a table. 我是新来的人,在检索表中行的输入框的值时遇到一些困难。
On my render method I have a form, table and save all button, 在我的渲染方法上,我有一个表单,表格并保存所有按钮,
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 method adds a row to the render method onPress of "Add row" button 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>
);
}
I need to get all the values of input boxes in all rows when I hit the saveAll button. 按下saveAll按钮时,需要获取所有行中输入框的所有值。
I tried, 我试过了,
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);
}
},
But I get Nan here and on console I get, 但是我在这里找到Nan,然后在控制台上得到
<input type="text" name="phone_0" placeholder="Foward Phone Number" pattern="[0-9]*" inputmode="numeric">
<!-- react-text: 162 -->
<!-- /react-text -->
I would be really appreciate if anyone could help me onSubmit Thank you 如果有人可以帮助我,我将非常感谢
Issue is in the way you are assigning ref to input elements here: 问题是您在此处将ref分配给输入元素的方式:
ref={(input) => this.fwd_$index = input}
Use this: 用这个:
ref={(input) => this[`fwd_${index}`] = input}
Then fetch the value by using: 然后使用以下方法获取值:
this[`fwd_${index}`].value
Check the working example: 检查工作示例:
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'/>
Suggestion: 建议:
Instead of using multiple ref , use controlled component and store the data in state variable, We should avoid the use of ref . 代替使用多个ref ,使用受控组件并将数据存储在状态变量中, 我们应避免使用ref 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.