Question

我有外部组件管理我的输入字段，如果没有输入则抛出错误。在先前具有class component和reduxForm效果的表单提交中，这会引发缺少输入的错误，我想知道如何通过钩子实现此目的，因为无论我有输入还是没有输入，提交都会通过。

import ConstructField from '../components.render';

const ActivitiesForm = () => {

  const handleSubmit_ = () => {
    console.log({ activityName });
  };

  const [activityName, setActivityName] = useState(null);
  const handleInputName = (e) => setActivityName(e.target.value);

  const { items } = useSelector((state) => ({
    items: state.items,
  }));

  const { register, handleSubmit, errors, control } = useForm();

  return (
    <div>

      <Form onSubmit={handleSubmit(handleSubmit_)} className='ui form'>
        <Form.Group widths='equal'>
          <Field
            component={ConstructField('input')}
            onChange={handleInputName}
            label='Activity Name'
            name='activityName'
            placeholder='Activity Name'
            validate={required}
          />

        </Form.Group>



        <br />

        <Form.Group inline>
          <Button.Group>
            <Button primary>Save</Button>
            <Button.Or />
            <Button positive onClick={goBackButton}>
              Go Back
            </Button>
          </Button.Group>
        </Form.Group>
      </Form>
    </div>
  );
};

const required = (value) => (value ? undefined : 'this field is required');

const activityform = reduxForm({
  form: 'activityform',
  enableReinitialize: true,
})(ActivitiesForm);

export default activityform;

反应钩子，使用reduxForm

0 个答案: