在这里,我正在尝试在表单验证完成后更改我的状态。但我不知道为什么我的状态在 onFinish 函数中没有改变。我的代码:-
import { Form, Input, Button, Result } from "antd";
import "antd/dist/antd.css";
import { selectViewResult, setViewDate, setViewResult } from "../../features/userSlice";
import { useDispatch, useSelector } from "react-redux";
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
const validateMessages = {
required: "${label} is required!",
types: {
email: "${label} is not a valid email",
number: "${label} is not a valid number",
},
};
const Formm = () => {
const dispatch = useDispatch();
const onFinish=(value) =>{
console.log(value);
dispatch(setViewDate(true));
dispatch(setViewResult(true));
console.log(success)
}
const success= useSelector(selectViewResult);
return (
<>
{
!success ? <>
<h1>Details About You</h1><Form style={{marginRight:"500px"}} {...layout} onFinish={onFinish} validateMessages={validateMessages} >
<Form.Item
name={['user', 'name']}
label="Name"
rules={
[
{
required:true,
}
]
}>
<Input />
</Form.Item>
<Form.Item
label="Email"
name={['user', 'email']}
rules={
[
{
type:'email',
required:true,
},
]
}>
<Input />
</Form.Item>
<Form.Item
name={['user', 'number']}
label="Number"
rules={
[
{
required:true,
},
]
}>
<Input />
</Form.Item>
<Form.Item
name={['user', 'reason']}
label="Reason Behind Appointment">
<Input.TextArea />
</Form.Item>
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
<Button type="primary" htmlType="submit" onChange={hh}>Submit</Button>
</Form.Item>
</Form> </>:<Result
title="Great, Appoinment Has Been Set. See You soon."
extra={<Button type='primary'>Done</Button>}
/>
}
</>
);
}
export default Formm;
我尝试了很多方法来解决这个问题,但最终我失败了。我尝试了 onChange、onClick 等来改变我的状态。但没有任何改变。每次成功变量都显示为假。