Question

我的应用程序中有三个文本框，所有三个文本框都具有相同的功能，例如发生onChange Function时。我将状态从空更改为文本框的当前目标值。我想下面似乎是初级水平。您能帮我做个反应吗？

updateBugChange = (e, type) => {
    if(type === 'title')
    {
        this.setState({ bugTitle : e.target.value })
    }
    if(type === 'type')
    {
        this.setState({ bugType : e.target.value })
    }
    if(type === 'description')
    {
        this.setState({ bugDescription : e.target.value })
    }
}

Answer 1

我们可以在类型和字段名称之间创建映射，然后再次使用JS的计算属性功能。此选择范围有限。

updateBugChange = (e, type)=>{
    const mapping = {
        title: 'bugTitle',
        type: 'bugType',
        description: 'bugDescription'
    }

    if(!mapping[type]) return;

    this.setState({
        [mapping[type]]: e.target.value
    })
}

如何最小化反应条件代码？

1 个答案: