Redux-form:如何在模式弹出时从 API 调用加载值(编辑模式)到表单? [英] Redux-form: How to load values(edit mode) from a API call to form when in modal pop up?

问题描述

我是 React & 的新手Redux-Form，目前我需要一些帮助.

基本上我有列表页面和它们的编辑按钮.单击编辑后，我会显示一个带有字段的模式弹出窗口，并执行 API 调用以获取相应的列表数据.

能否请您告诉我如何使用从 API 调用接收到的数据预先填充模态弹出窗口中的字段?

非常感谢带有代码示例的演示(就像我说我对 React & Redux & Redux-form 还很陌生).:(

提前致谢！

解决方案

流程如下:

componentDidMount() {this.props.loadClient();//从你的组件分派一个动作}

动作调度器

loadClient() {//这里调用API}

将结果存储在 redux reducer 中

case LOAD_PROFILE_SUCCESS:返回 {...状态，data: action.result//在这里保存你的数据};

然后将initialValues道具添加到@connect装饰器

@connect(state => ({initialValues: state.profile.data//在这里加载保存的数据}),{ 加载客户端 })

示例:您可以在 reduxForm 本身加载初始值.

let AddUser = props =>{const { handleSubmit, initialValues } = props;返回 (<form onSubmit={handleSubmit}><div><label htmlFor="name">名称</label><Field name="name" component="input" type="text"/>

<div><label htmlFor="email">电子邮件</label><Field name="email" component="input" type="email"/>

<div><label htmlFor="phoneno">PhoneNo</label><Field name="phoneNo" component="input" type="text"/>

<button type="submit">提交</button></表单>);}export default AddUser = reduxForm({ form: 'addUser', initialValues: {名称: "abc",电子邮件:[e-mail]"，电话号码:1234567890"} })(添加用户)

您的组件必须具有 Form 组件.其余的将由 redux-form 处理.

<块引用>

注意:
您的初始值的结构必须与表单数据相同.字段名和对象属性名要一致.

更多细节，你可以参考redux-form官方页面这里

I'm pretty new to React & Redux-Form and at the moment I am in need of some help.

Basically I have listing page with lists and their edit button. When the edit is clicked, I am showing a modal pop up with the fields and doing a API call to fetch the respective list data.

Could you please let me know how can I pre-populate the fields in the modal pop up with the data received from API call?

A demonstration with a code sample will be much appreciated(like I said I am pretty new to React & Redux & Redux-form). :(

Thanks in advance!

解决方案

Here is the flow:

componentDidMount() {
    this.props.loadClient(); // dispatch an action from your component
}

action dispatcher

loadClient() {
 // API call here
}

Store the result in redux reducer

case LOAD_PROFILE_SUCCESS:
  return {
    ...state,
    data: action.result // save your data here
  };

Then add the initialValues props to the @connect decorator

@connect(state => ({
    initialValues: state.profile.data // load the saved data here
  }),
  { loadClient }
)

Example: You could load the intialvalues at reduxForm itself.

let AddUser = props => {
    const { handleSubmit, initialValues } = props;
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name</label>
                <Field name="name" component="input" type="text" />
            </div>
            <div>
                <label htmlFor="email">Email</label>
                <Field name="email" component="input" type="email" />
            </div>
            <div>
                <label htmlFor="phoneno">PhoneNo</label>
                <Field name="phoneNo" component="input" type="text" />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default AddUser = reduxForm({ form: 'addUser', initialValues: {
  name: "abc",
  email: "[e-mail]",
  phoneNo: "1234567890"
} })(AddUser)

Your component must have the Form component. Rest will be taken care by redux-form.

Note:
Structure of your initialValues must same of form data. Field name and the object property name should be same.

for more detail, you could refer redux-form official page Here

这篇关于Redux-form:如何在模式弹出时从 API 调用加载值(编辑模式)到表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！