如何为 React 中的输入数组执行单个处理程序答案

【问题标题】：How to do a single handler for array of inputs in React如何为 React 中的输入数组执行单个处理程序
【发布时间】：2020-10-24 13:15:37
【问题描述】：

我知道如何为多个输入字段创建多个处理程序，但我只想创建一个处理动态数量的输入字段的处理程序，但我卡住了。我无法修改输入，它们具有固定值。

这是主组件的状态

this.state = {
assetAccounts:["Cash","Financial Investment","Real Estate","Private Business Value"],
accounts:[0,1,2,3]
}
this.onChangeAccount = this.onChangeAccount.bind(this)

这是处理程序

    onChangeAccount = (e,index) => {
    const value = e.target.value;
    let data = this.state.accounts;
    data[index]=value;
    console.log(data)
    this.setState({
        accounts: [...data]
    })
}

这是渲染的：

<table>
{this.state.assetAccounts.map((account,index)=>(<Account value={this.state.accounts[index]} name={account} key={index} onChange={this.onChangeAccount.bind(this)}/>))}
</table>

帐户是我自己的组件：

import React from 'react';
class Account extends React.Component {
    render() {
        return (
            <div>
            <tr>     
            <td width="200px">{this.props.name}</td>
            <td>    
            <input
                type="text" value={this.props.value}
                className="form-control"
                onChange={this.props.onChange}
            />
            </td>
            </tr>
            </div>           
        );
    }
}    
export default Account;

如果有人知道如何使每个单独的帐户都可以单独编辑，我将不胜感激。感谢您的帮助！

【问题讨论】：

标签： arrays reactjs input handler

【解决方案1】：

组件Account 的属性onChange 只接受一个参数e。使用Account 时应传递参数index。就这样做吧：

<table>
{this.state.assetAccounts.map((account,index)=>(<Account value={this.state.accounts[index]} name={account} key={index} onChange={e => this.onChangeAccount(e, index)}/>))}
</table>

实际上，在Account 中将e.target.value 作为onChange 的参数而不是e 更好。

【讨论】：