时间戳

首页 > 解决方案 > 我正在尝试将此表单的 useMemo 钩子用于名称

reactjs - 我正在尝试将此表单的 useMemo 钩子用于名称

问题描述

这是表单的代码。我想知道如何使用Memo 作为组件名称，长，短，条目......谢谢！

function App() {
  const [name, setName] = useState(''); //the components to put useMemo on

  const handleSubmit = (e) => {
      e.preventDefault();
      console.log({name, long, short, entry, exit})
    };
  
  return (
     <form onSubmit={handleSubmit}> //form that enters in the data
      <label>
        Symbol:
        <br />
        <input name="name" value={name} onChange={(e) => setName(e.target.value)}/> //sets the name value
      </label>
      <br />
      <input type = "submit" value="whatisname"/>
     </form>
  );
}

标签： reactjs

解决方案

为什么要使用useMemo()？该钩子用于返回一个记忆值，您的字段只是值。它们不需要在更改时重新计算，它们只是保存数据。

为了更详细地说明这一点，假设您有一个文本字段，并且您想从中删除包含在数组中的所有字符bannedChars = ['a', 'b', 'c'];。这是一个有点合适的用途，useMemo()因为它是一个繁重的操作，我们可以利用useMemo()'s memoization。

const bannedChars = ['a', 'b', 'c'];

function removeBannedChars(str) {
  bannedChars.forEach(c => str = str.replace(c, ''));
  return str;
}

function App() {
  const [value, setValue] = useState("");

  const sanitized = useMemo(() => {
    return removeBannedChars(value);
  }, [value]);

  return (
    <input
      name="value"
      value={sanitized}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

这将在每次更改value（每次按键时）时运行，并从中删除被禁止的字符。它将返回“净化”值，该值将保存到sanitized.

推荐阅读