如何在React的Redux-Form中传递Props实现取消按钮功能

我来帮你搞定这个Cancel按钮的事件传递问题，只需要两步简单修改就能实现：

1. 更新你的Redux-Form组件（AddInitiativeForm） #

首先得让子表单组件接收父组件传递的点击回调，然后把这个回调绑定到Cancel按钮上：

• 从props里解构出onCancel（名字可以自己定，只要和父组件传递的属性名一致就行）
• 把Cancel按钮原来的空onClick替换成调用这个onCancel函数
• 别忘了给新增的回调加上propTypes校验，保证类型正确

修改后的代码如下：

import "./styles/list-item.scss";
import {Button, ButtonToolbar} from "react-bootstrap";
import {Field, reduxForm} from "redux-form";
import InputField from "../form-fields/InputField";
import PropsTypes from "prop-types";
import React from "react";

const AddInitiativeForm = (props) => {
  // 新增解构onCancel回调
  const {handleSubmit, pristine, submitting, onCancel} = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <div className="form-field">
          <Field component={InputField} label="Initiative name" name="initiative_name" type="text" />
        </div>
        <div className="form-field">
          <Field component={InputField} componentClass="textarea" label="Description" name="initiative_description" rows="5" type="text" />
          <Field component={InputField} label="Tags" name="initiative_tags" type="text" />
        </div>
        <div className="form-button-group">
          <ButtonToolbar>
            {/* 绑定父组件传递的onCancel回调 */}
            <Button bsSize="small" style={{"width": "48%"}} type="button" onClick={onCancel} >
              Cancel
            </Button>
            <Button bsSize="small" disabled={pristine || submitting} style={ { "backgroundColor": "#999", "width": "48%" }} type="submit" >
              Add
            </Button>
          </ButtonToolbar>
        </div>
      </div>
    </form>
  );
};

AddInitiativeForm.propTypes = {
  "handleSubmit": PropsTypes.func.isRequired,
  "pristine": PropsTypes.bool.isRequired,
  "submitting": PropsTypes.bool.isRequired,
  // 新增onCancel的类型校验
  "onCancel": PropsTypes.func.isRequired
};

AddInitiativeForm.defaultProps = {};

export default reduxForm({form: "addInitiative"})(AddInitiativeForm);

2. 在父组件中传递Cancel回调 #

现在只需要在父组件使用AddInitiativeForm时，把你的handleCancelClick函数通过onCancel属性传递过去就行。另外我注意到你的onSubmit函数有个小语法错误——直接写了数据对象但没return，这会导致提交时没有数据返回，顺便帮你修正了：

修改后的父组件代码：

import {CommonComponents} from "../../common";
import React from "react";

const { AddInitiativeForm } = CommonComponents;

class InitiativeContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { "displayForm": false };
  }

  handleCancelClick = () => {
    this.setState((prevState) => ({"displayForm": !prevState.displayForm}));
  }

  onSubmit = (values) => {
    // 修正：需要return提交的数据对象
    return {
      "data": {
        "attributes": {
          "description": values.initiative_description,
          "end-date": new Date(),
          "start-date": new Date(),
          "tags": [values.initiative_tags],
          "title": values.initiative_name
        },
        "type": "initiatives"
      }
    }
  }

  render() {
    const { displayForm } = this.state;
    return (
      {/* 传递onCancel回调给子表单 */}
      <AddInitiativeForm displaySearch={false} onSubmit={this.onSubmit} onCancel={this.handleCancelClick} />
    );
  }
}

这样点击表单里的Cancel按钮时，就会触发父组件的handleCancelClick函数，完美实现你想要的控制表单显示/隐藏的逻辑啦～

内容的提问来源于stack exchange，提问作者Amen Ra