如何使用react hooks验证表单？

Question

如何使用react hooks验证表单？

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

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>
    )
};

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

Answer 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)