reactjs - 如何在地图中实现 onChange 处理程序？答案

【问题标题】：reactjs - How to implement onChange handler in map?reactjs - 如何在地图中实现 onChange 处理程序？
【发布时间】：2020-05-20 08:48:45
【问题描述】：

我希望为自定义信息下的每个属性都有一个输入框并允许更改。它可以完美显示数据，但 onChange 处理程序不起作用（输入控件不可编辑）。如何在地图中实现处理程序？

我有一个 JavaScript 对象数组：

customizeInfo: [
    {
        "appId": "App 1",
        "attrSet": {
            "nationality": "American",
            "children": "Morgan Stark",
            "spouse": "Pepper Potts"
        }
    },
    {
        "appId": "App 2",
        "attrSet": {
            "weapon": "Iron Man",
            "assistAI": "F.R.I.D.A.Y"
        }
    }
]

我的代码：

render() {
    const {customizeInfo} = this.state
    return (
        <div>
            {
                customizeInfo.map((el) => {
                    return <div>
                        <h5>{el.appId}</h5>
                        <div><input name="nationality" value={el.attrSet.nationality} 
                        onChange={this.onChange}></input></div>
                        <div>{el.attrSet.children}</div>
                    </div>
                })
            }
        </div>
    )
}

OnChange：

onChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    })
}

构造函数：

constructor(props) {
    super(props)

    this.state = {
        customizeInfo: []
}

    this.onChange = this.onChange.bind(this)
}

【问题讨论】：

标签： reactjs

【解决方案1】：

使用以下3种方式：

this.onChange = this.onChange.bind(this) 在构造函数中
onChange={e => this.onChange(e)}>
onChange =（事件）=> { 这个.setState({ [event.target.name]：event.target.value }) }

【讨论】：