Question

我是一个redux-form库新手。我正在尝试编写一些代码来将数据更新到服务器。服务器支持的更新API。

我正在使用reactjs，redux和redux-form。我的简洁代码是：

render() {
    const { handleSubmit, pristine, reset, submitting, updatePost } = this.props;
    return (
        <div>
            <h4>Update the Post</h4>
            <form onSubmit={handleSubmit(updatePost.bind(this))}>
                <Field name="title" component={this.renderField} type="text" className="form-control" label="Post Title"/>
                <Field name="description" component={this.renderField} type="textarea" className="form-control" label="Post Description"/>
                <button type="submit" className="btn btn-primary">Update</button>
                <Link to='/template'>Back to List</Link>
            </form>
        </div>
    );
}

当我点击提交按钮时，代码onSubmit={handleSubmit(updatePost.bind(this))}会将表单中的所有数据发送到我的函数updatePost。
我的问题是：我想传递一些数据（比如PostID）。我怎样才能做到这一点？我不想使用作弊（就像我的表格中隐藏的字段）。
谢谢。

Answer 1

不确定您的用例是什么，但您可以采取一些方法......

使用父组件的setState，您可以将其作为initialValues内的道具传递。

class ParentComponent extends Component {
   updatePost(formValues) {
      // process data
      this.setState({ postId: '...' });
   }
   render() {
      return <FormComponent initialValues={{postId: this.state.postId}} />
   }
}

初始化reduxForm时，请确保将enableReinitialize设置为true。

export default reduxForm({ form: 'myFormName', enableReinitialize: true })(FormComponent);

或

使用reduxForm change动作创建者

import { change } from 'redux-form';

class ParentComponent extends Component {
    updatePost(formValues) {
       this.props.change('myFormName', 'postId', 'postid_value');
    }
    ...
}

export default connect(mapStateToProps, { change })(ParentComponent);

或者将postId作为道具本身传递（<MyForm postId={...} />）并在MyForm组件内执行change操作。

Answer 2

我使用传递给reduxForm装饰器的onChange函数在任何表单字段更改后提交我的表单。

您可以在onChange函数中修改传递给onSubmit函数的表单values对象。在下面的示例中，我在使用组件属性访问mySubmit函数之前在值对象上创建新的键/值对。

我还没有测试过，但这也适用于演示组件。

//@flow
import React, { PureComponent } from "react";
import { Field, Form, reduxForm } from "redux-form";
import { FormLabel, FormControl, FormControlLabel } from "material-ui/Form";
import { RadioGroup } from "redux-form-material-ui";
import Radio from "material-ui/Radio";
import Paper from "material-ui/Paper";

type HccTableQuestionProps = {
  handleSubmit: Function,
  row: Object,
};

class HccTableQuestion extends PureComponent<HccTableQuestionProps> {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(values) {
    console.log("hccActionForm submitted ", values);
  }

  render() {
    const { handleSubmit, row } = this.props;
    return (
      <Paper style={{ padding: 9 }}>
        <Form name={"hccActionForm"} onSubmit={handleSubmit(this.handleChange)}>
          <FormControl component="fieldset">
            <FormLabel component="legend">HCC Action</FormLabel>
            <Field component={RadioGroup} name={"hccAction"}>
              <FormControlLabel
                value="ICD Code Submitted for CY encounter"
                control={<Radio />}
                label="ICD Code Submitted for CY encounter"
              />
              <FormControlLabel
                value="Queried Provider"
                control={<Radio />}
                label="Queried Provider"
              />
              <FormControlLabel
                value="Condition Not Present"
                control={<Radio />}
                label="Condition Not Present"
              />
              <FormControlLabel
                value="No Action"
                control={<Radio />}
                label="No Action"
              />
            </Field>
          </FormControl>
        </Form>
      </Paper>
    );
  }
}

export default reduxForm({
  form: "hccActionForm",
  enableReinitialize: true,
  onChange: (values, dispatch, props, previousValues) => {
    values.hccCode = props.hccCode; // Adding new key/value pair to values
    values.patientHccCodingId = 99999999; // Adding new key/value pair to values
    props.submit();
  },
})(HccTableQuestion);

如何使用handleSubmit以表格形式提交数据和以redux形式提交一些额外数据？

2 个答案: