如何使用反应钩子验证表单？答案

【问题标题】：How to validate form using react hooks?如何使用反应钩子验证表单？
【发布时间】：2019-08-25 17:34:43
【问题描述】：

如何使用反应钩子验证表单？

我使用了类组件并且效果很好，但现在决定使用带有钩子的功能组件并且不知道验证表单的最佳方法。我的代码：

const PhoneConfirmation = ({ onSmsCodeSubmit }) => {

    const [smsCode, setSmsCode] = useState('');

    const onFormSubmit = (e) => {
        e.preventDefault();
        if (smsCode.length !== 4) return;
        onSmsCodeSubmit(smsCode);
    }

    const onValueChange = (e) => {
        const smsCode = e.target.value;
        if (smsCode.length > 4) return;
        setSmsCode(smsCode);
    };

    return (
        <form onSubmit={onFormSubmit}>
            <input type="text" value={smsCode} onChange={onValueChange} />
            <button type="submit">Submit</button>
        </form>
    )
};

它可以工作，但我认为在功能组件中使用处理函数不是一个好主意，因为每次调用组件时都会定义它。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你的代码很好，但你可以稍微改进它，因为你don't need a controlled component。

此外，您可以memorize the component 这样它就不会由于其父渲染而在onSmsCodeSubmit 上进行不必要的渲染。

const FORM_DATA = {
  SMS: 'SMS'
}

const PhoneConfirmation = ({ onSmsCodeSubmit, ...props }) => {
  const onSubmit = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    const currSmsCode = data.get(FORM_DATA.SMS);
    onSmsCodeSubmit(currSmsCode);
  };

  return (
    <form onSubmit={onSubmit} {...props}>
      <input type="text" name={FORM_DATA.SMS} />
      <button type="submit">Submit</button>
    </form>
  );
};

// Shallow comparison by default
export default React.memo(PhoneConfirmation)

【讨论】：