时间戳

首页 > 解决方案 > 有没有办法“拦截”反应状态更新，并清理/修剪/...设置之前的值

reactjs - 有没有办法“拦截”反应状态更新，并清理/修剪/...设置之前的值

问题描述

假设功能组件中有一个状态，其中包含一个字符串；由于此状态是从组件中的多个位置更新的，是否可以“拦截”所有更新，并始终执行一些操作，例如在设置值之前对其进行修整？在这里使用 useReducer 会更好吗？

标签： reactjsreact-hooks

解决方案

您将为此创建一个可重用的函数并将其应用到需要的地方：

  const [name, setName] = useState('');

  const updateName = (value) => {
    // do some validation (like avoid numbers)
    if(value.match(/[0-9]+/)) return
    // some normalize
    setName(value.trim());
  }

  return (
    <>
      <label for="name">Name</label>
      <input id="name" value={name} onChange={e => updateName(e.target.value)} />
      <button onClick={() => updateName('C3P0')}>Try droid name</button>
    </>
  )

或使用一些具有内置验证的特定库，如yup

推荐阅读