如何在 React 中为输入数组做一个处理程序

Question

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

这是主要组件的状态

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;

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

Answer 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 更好。

如何在 React 中为输入数组做一个处理程序

How to do a single handler for array of inputs in React

arrays

input

handler

reactjs