Reactjs 有没有办法缩短这个在React中使用钩子的变更处理程序？

对于基于类的组件，您可以使用计算属性，以便在id属性的帮助下对多个输入使用单个处理程序，如下所示：

function handleChange(evt) {
  const value = evt.target.value;
  setState({
    ...state,
    [evt.target.name]: value
  });
}

这是我能想到的最好的方法，但我相信一定有一个更短的方法：

  const handleChange = (e) => {
    if (e.target.id === 'name') setName(e.target.value)
    if (e.target.id === 'genre') setGenre(e.target.value)
    if (e.target.id === 'description') setDescription(e.target.value)
  }

有什么想法吗？

---

谢谢。

您可以在

useState

中创建一个对象，并像第一个示例一样进行更新

// Declare the state with a object default value
const [state, setState] = useState({})

const handleChange = (e) => {
    setState(prev => ({
        ...prev,
        [e.target.id]: e.target.value
    }))
}

如果您无法更改

useState

，并且有非常strong的理由将这3个函数分开

useState

s，则可以创建一个对象，该对象根据

e.target.id

const updater = {
    name: setName,
    genre: setGenre,
    description: setDescription,
}

当你更新的时候

const handleChange = (e) => {
    const updateValue = updater[e.target.id]

    if (updateValue) {
        updateValue(e.target.value)
    }
    else {
        // No function to update found
        // Do something else
    }
}

---

您可以在

useState

中创建一个对象，并像第一个示例一样进行更新

// Declare the state with a object default value
const [state, setState] = useState({})

const handleChange = (e) => {
    setState(prev => ({
        ...prev,
        [e.target.id]: e.target.value
    }))
}

如果您无法更改

useState

，并且有非常strong的理由将这3个函数分开

useState

s，则可以创建一个对象，该对象根据

e.target.id

const updater = {
    name: setName,
    genre: setGenre,
    description: setDescription,
}

当你更新的时候

const handleChange = (e) => {
    const updateValue = updater[e.target.id]

    if (updateValue) {
        updateValue(e.target.value)
    }
    else {
        // No function to update found
        // Do something else
    }
}