我有 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
<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
<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 的基本知识,但不知道在这种情况下该怎么做。如果有任何帮助,我将不胜感激。
最佳答案
您正在声明一个函数组件,它接收其 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);
关于javascript - React(next js) 类组件起作用。 Prop 怎么办?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59425250/