我可以在 React 中使用 switch 语句来管理我的表单吗？答案

【问题标题】：Can I use a switch statement to manage my forms in React?我可以在 React 中使用 switch 语句来管理我的表单吗？
【发布时间】：2020-02-01 15:16:54
【问题描述】：

通过为每个输入元素创建句柄函数，我学会了使用 React 构建表单

handleChangeName = (e: any) => {
    this.setState({
        name: e.target.value
    })
}

handleChangeSurname = (e: any) => {
    this.setState({
        surname: e.target.value
    })
}

但我认为，如果我只使用一个带有开关的函数来处理每种情况，我的代码会更清晰，如下所示：

handleChange = (e: any) => {
      switch (e.target.id) {
        case 'name':
            this.setState({
                name: e.target.value
            })
            break;
        case 'surname':
            this.setState({
                surname: e.target.value
            })
            break;
      }
}

它仍然是 React 的好习惯吗？有什么我不会想到的缺点吗？

【问题讨论】：

标签： javascript reactjs switch-statement

【解决方案1】：

你不需要开关盒，你可以使用Property Accessor。

handleChange = (e: any) => {
        this.setState({
            [e.target.id]: e.target.value
        })
}

【讨论】：

谢谢，更好了！我刚刚发现这种方法（和开关方法）的一个“缺点”，如果您输入错误的 id，您将不会收到任何错误，并且您的表单将无法正常工作。