有没有一种方法可以缩短在React中使用钩子的变更处理程序?

问题描述 投票:1回答:1

使用基于类的组件,您可以使用计算出的属性,以便在像这样的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)
  }

有什么想法吗?谢谢。

reactjs react-hooks
1个回答
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
    }))
}

如果无法更改它,并且非常有理由使这3个状态分离,则可以创建一个对象,该对象基于e.target.id返回3个函数。>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 } }

热门问题
推荐问题
最新问题