Есть ли способ сократить этот обработчик изменений, который использует перехватчики в React?

Question

С компонентами на основе классов вы можете использовать вычисленные свойства, чтобы использовать один обработчик для нескольких входов с помощью атрибута 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)
  }

Есть идеи? Спасибо.

Answer 1

Вы можете создать объект в 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 и иметь очень сильный причина иметь эти 3 отдельных useState с, вы можете создать объект, который возвращает 3 функции на основе 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
    }
}