javascript - React(next js) 类组件起作用。 Prop 怎么办？

Question

我有 React 类组件，我正在尝试将其更改为正常运行。但我不知道如何处理 Prop 。

这是我的全部功能。

const RegistrationForm = () => {

    const [firstname, setFirstname] = useState('');
    const [secondname, setSecondname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmDirty, setconfirmDirty] = useState(false);

    const handleSubmit = e => {
      e.preventDefault();
    axioswal
      .post('/api/users', {
        firstname,
        secondname,
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          dispatch({ type: 'fetch' });
          redirectTo('/');
        }
      });
  };

  const handleConfirmBlur = e => {
      const { value } = e.target;
      setState({ confirmDirty: state.confirmDirty || !!value });
    };

    const compareToFirstPassword = (rule, value, callback) => {
      const { form } = props;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    };

    const validateToNextPassword = (rule, value, callback) => {
      const { form } = props;
      if (value && state.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    };

    const { getFieldDecorator } = props.form;

      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      const tailFormItemLayout = {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      };
      return (
        <Form {...formItemLayout} onSubmit={handleSubmit}>
          <Form.Item
          label={
            <span>
              Firstname&nbsp;
              <Tooltip title="What is your firstname?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('Firstname', {
            rules: [{ required: true, message: 'Please input your Firstname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
        <Form.Item
          label={
            <span>
              Secondname&nbsp;
              <Tooltip title="What is your Secondname?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('Secondname', {
            rules: [{ required: true, message: 'Please input your Secondname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
          <Form.Item label="E-mail">
            {getFieldDecorator('email', {
              rules: [
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
                {
                  required: true,
                  message: 'Please input your E-mail!',
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label="Password" hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: 'Please input your password!',
                },
                {
                  validator: validateToNextPassword,
                },
              ],
            })(<Input.Password />)}
          </Form.Item>
          <Form.Item label="Confirm Password" hasFeedback>
            {getFieldDecorator('confirm', {
              rules: [
                {
                  required: true,
                  message: 'Please confirm your password!',
                },
                {
                  validator: compareToFirstPassword,
                },
              ],
            })(<Input.Password onBlur={handleConfirmBlur} />)}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            {getFieldDecorator('agreement', {
              valuePropName: 'checked',
            })(
              <Checkbox>
                I have read the <a href="">agreement</a>
              </Checkbox>,
            )}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              Register
            </Button>
          </Form.Item>
        </Form>
      );


}

  const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);

  WrappedRegistrationForm.getInitialProps = async () => ({
    namespacesRequired: ['common'],
  })

  export default withTranslation('common')(WrappedRegistrationForm);

例如在这行代码中。

const { getFieldDecorator } = props.form;

我收到这个错误。

ReferenceError: props is not defined

当我删除 props 时，我得到 form is not defined。我知道 Prop 的基本知识，但不知道在这种情况下该怎么做。如果有任何帮助，我将不胜感激。

Answer 1

您正在声明一个函数组件，它接收其 props 作为函数中的第一个参数。

const RegistrationForm = (props) => {

    const [firstname, setFirstname] = useState('');
    const [secondname, setSecondname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmDirty, setconfirmDirty] = useState(false);