反应：setstate的可重用事件处理程序

Question

我有一个带有某些字段（下拉列表，文本输入区域等）的react组件，每个字段都有onclick处理程序，例如：

    handleTitleChange(v){
        this.setState({
            draft: {...this.state.draft, title: v}
        })
    }

    handleDescriptionChange(v){
        this.setState({
            draft: {...this.state.draft, description: v}
        })
    }
...... about 5 more

请注意，状态是具有不同键的对象。 如何将状态对象的字段传递给handle函数来制作唯一的处理程序？像这样：

handleFieldChange(fieldName, v){
    this.setState({
        draft: {...this.state.draft, <fieldName>: v}
    })
}

我可以在其他组件中重复使用它吗？

Answer 1

您可以使用以下语法来实现：

handleFieldChange(fieldName, v){
    this.setState({
        draft: {...this.state.draft, [fieldname]: v}
    })
}