我在reactJs中创建了此表单发票注册。reactjs如何正确处理输入数组上的值更改
表单应处理的输入阵列（标有红色轮廓）。每当onChange事件发生在输入上。所有输入都接收到相同的值。如何正确处理这个问题？我打算使用此输入值生成如下数据：
[
{
invoice_number:102947303364,
invoice_registration_no : 1235
},
{
invoice_number:102947109177,
invoice_registration_no : 6578
},
]
在此先感谢您的帮助。
我不知道哪个是DB中的主键，所以我认为invoice_number是主键。
class CustomList extends React.Component {
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.renderList = this.renderList.bind(this);
this.state = {
data: [
{
invoice_number:102947303364,
invoice_registration_no : 1235,
some_value: '',
}, {
invoice_number:102947109177,
invoice_registration_no : 6578,
some_value: '',
},
],
}
}
handleInputChange(e){
const {id, value} = e.target;
let {data} = this.state;
const targetIndex = data.findIndex(datum => {
return datum.invoice_number == id;
});
if(targetIndex !== -1){
data[targetIndex].some_value = value;
this.setState({data});
}
}
renderList() {
const {data} = this.state;
let content = data.map(datum => {
return (
<li id={datum.invoice_number}>
<p>{datum.invoice_number}</p>
<input type="text" id={datum.invoice_number} value={datum.some_value}
onChange={this.handleInputChange}/>
</li>
)
});
return (
<ul>
{content}
</ul>
)
}
render() {
const myList = this.renderList();
return (
<div>
{myList}
</div>
);
}
}
ReactDOM.render(
<CustomList/>,
document.getElementById('root')
)<html>
<body>
<div id="root"></div>
</body>
</html>
<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>你需要看到的是handleInputChange方法结合CustomList类和renderList。
我只是在每个输入设置id属性为invoice_number，并使用Array.prototype.findIndex找到更改的输入索引。
你也可以这样声明'handleInputChange'： 'handleInputChange =（）=> {...}'。那么你不需要以这种丑陋的方式来绑定它们：D – Nocebo
@Nocebo事实上，我通常使用ES6语法的':: this.method'来将方法绑定到类。但堆栈溢出不支持ES6，所以我习惯性地这样写。谢谢你告诉我！ – HyeonJunOh
哦，我明白了。是啊只是试图帮助;）有一个愉快的一天:) – Nocebo
它看起来像你绑定的保证，而不是价值 –