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

Question

我通过为每个输入元素创建一个句柄函数来学习使用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还是一个好习惯吗？有没有我不会想到的缺点？

Answer 1

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

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