反应状态改进

Question

我们可以将代码写成更短的版本吗？

例如：

function Account() {
  const [code, setCode] = useState('')
  
  return <input onChange={(e) => setCode(e.target.value)} />
}

我们能不能像不创建新函数那样把它做得更短？喜欢：

<input onChange={setCode} />

有办法吗？

最好！

Answer 1

您可以使用自定义 useEventState 帮助程序来包装 React 的 useState 并向元组（数组）添加一个额外的 setter 它 returns:

const useEventState = value => {
  const [ initialValue, directSetter ] = useState(value);
  
  return [
    initialValue,
    directSetter,
    e => directSetter(e.target.value)
  ];
}

我觉得还是return原来直接取值的setter有意义。如果您仅通过 onChange 事件设置 code，您甚至可以将其替换为 e.target.value 事件。

这是一个简单的示例（我在其中添加了一个使用直接 setter 的按钮，以表明包含它仍然有用）：

function Account() {
  const [code, setCode, setCodeFromEvent] = useEventState('');
    
  const toUpper = () => {
    setCode(code.toUpperCase());
  }
  
  return (
    <div>
      <input value={code} onChange={setCodeFromEvent} />
      <p>Your code: {code}</p>
      <button onClick={toUpper}>To upper case</button>
    </div>
  );
}

ReactDOM.render(
  <Account />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script>
const { useState } = React;
const useEventState = value => {
  const [ initialValue, directSetter ] = useState(value);
  
  return [
    initialValue,
    directSetter,
    e => directSetter(e.target.value)
  ];
}
</script>

反应状态改进

React State Improvement

javascript

functional-programming

reactjs