如何解决即使在使用 OnChange 侦听器并更新状态后也无法编辑表单
即使使用值属性并更新状态后也无法编辑表单。我使用语义 UI 表单来显示表单。我正在使用 OnChange 事件侦听器和 value 和 name 属性,即使 icant 编辑表单。我在下面提供了我的代码
const { PostsStore } = useStore();
const { CreatePost,selectedPost,EditPost } = PostsStore;
const InitialState = selectedPost ?? {
id: "",displayName: "",Price: 0,description: "",sizes: "",Image: null,};
const [post,SetPost] = useState(InitialState);
const handleSubmit = () => {
console.log(post);
if (post.id) {
EditPost(post);
} else {
CreatePost(post);
}
};
const handleInputChange = (
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name,value } = event.target;
SetPost({ ...post,[name]: value });
};
return (
<Segment clearing>
<Form onSubmit={handleSubmit}>
<Form.Input
placeholder="DisplayName"
value={selectedPost?.displayName}
name="dislayName"
onChange={(e) =>handleInputChange(e)}
/>
<Form.Input
placeholder="Price"
value={selectedPost?.Price}
name="Price"
onChange={handleInputChange}
/>
<Form.TextArea
placeholder="Description"
value={selectedPost?.description}
name="description"
onChange={handleInputChange}
/>
<Form.Input
placeholder="Sizes"
value={selectedPost?.sizes}
name="sizes"
onChange={handleInputChange}
/>
<Button floated="right" type="submit" positive content="Submit" />
<Button floated="right" type="button" color="red" content="Cancel" />
</Form>
</Segment>
);
};
export default PostForm;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。