[英]How to send data to redux store from functional component?
Here is my modal form component这是我的模态表单组件
import { addItem } from "../actions/itemActions";
const Example = ({ visible, onCreate, onCancel }) => {
const [form] = Form.useForm();
return (
<Modal
visible={visible}
title="Create a new collection"
okText="Create"
cancelText="Cancel"
onCancel={onCancel}
onOk={() => {
form
.then(values => {
form.resetFields();
onCreate(values);
})
.catch(info => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
>
<Form.Item
name="name"
label="Item Name"
rules={[
{
required: true,
message: 'Please enter the name!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="count"
label="Item count"
rules={[
{
required: true,
message: 'Please enter the number of items!',
},
]}
>
<InputNumber style={{minWidth: '200px'}} />
</Form.Item>
<Form.Item
name="initialValue"
label="Item value"
rules={[
{
required: true,
message: 'Please enter the initialValue!',
},
]}
>
<InputNumber style={{minWidth: '200px'}} />
</Form.Item>
</Form>
</Modal>
);
};
Here is the collectionpage component Which will display the modal when the button is clicked这是collectionpage组件,单击按钮时将显示模式
const CollectionsPage = () => {
const [visible, setVisible] = useState(false);
const [name, setName] = useState(null)
const [count, setCount] = useState(null)
const [initialValue, setInitialValue] = useState(null)
const onCreate = values => {
console.log(values)
};
return (
<div>
<Button
type="primary"
onClick={() => {
setVisible(true);
}}
>
New Collection
</Button>
<Example
visible={visible}
onCreate={onCreate}
onCancel={() => {
setVisible(false);
}}
/>
</div>
);
};
const mapStateToProps = (state) => ({
item: state.item,
});
export default connect(mapStateToProps, { addItem })(CollectionsPage);
What I want to do is I want to set the stages of [name, count and initialValue] inside the onCreate function.我想要做的是我想在 onCreate function 中设置 [name, count 和 initialValue] 的阶段。 I am new to function component so i don't know how to set multiple states at one time.
我是 function 组件的新手,所以我不知道如何一次设置多个状态。 I have tried many ways from google but i am always wrong.
我从谷歌尝试了很多方法,但我总是错的。
After setting the state i want to create a newItem like this and export it to redux设置 state 后,我想创建一个这样的新项目并将其导出到 redux
() => {
const newItem = {
id: this.state.id,
name: this.state.name,
count: this.state.count,
key: this.state.id,
initialValue: this.state.initialValue,
};
this.props.addItem(newItem);
}
Since states are related in your code, you can use useState hook to hold an object and call addItem
from props to update redux state由于状态在您的代码中是相关的,您可以使用 useState 挂钩来保存 object 并从道具调用
addItem
以更新 redux state
const CollectionsPage = (props) => {
const [visible, setVisible] = useState(false);
const [item, setItem] = useState({})
const onCreate = values => {
console.log(values)
const item = {
id: values.id,
name: values.name,
count: values.count,
key: values.id,
initialValue: values.initialValue,
};
setItem(item);
props.addItem(item);
};
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.