javascript - 如何使用 react 钩子(Hook)验证表单？

Question

如何使用 react 钩子(Hook)验证表单？

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

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)