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

Question

我想为自定义信息下的每个属性都有一个输入框并允许更改。它可以完美地显示数据，但 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(event) {
    this.setState({
        [event.target.name]: event.target.value
    })
}

构造函数：

constructor(props) {
    super(props)

    this.state = {
        customizeInfo: []
}

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

标签： reactjs

Answer 1

使用以下3种方式：

1. this.onChange = this.onChange.bind(this) 在构造函数中
2. onChange={e => this.onChange(e)}>

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