时间戳

首页 > 解决方案 > 如何传递道具以获得取消按钮以在 Redux-Form 上的 React 中工作

javascript - 如何传递道具以获得取消按钮以在 Redux-Form 上的 React 中工作

问题描述

我Redux-Form在这个React组件中有这个，我有一个Cancel按钮，我想onClick在父组件中使用表单时传递一个事件。这是我的代码Redux-Form。

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) => {
    const {handleSubmit, pristine, submitting} = 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>
                        <Button
                            bsSize="small"
                            style={{"width": "48%"}}
                            type="button"
                            onClick={() => {}}
                        >
                            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
};

AddInitiativeForm.defaultProps = {};

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

现在我在父组件中使用此表单，无法弄清楚如何onClick在表单上调用该函数。这是我的代码。

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) => {
    "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 (
      <AddInitiativeForm
          displaySearch={false}
          onSubmit={this.onSubmit}
      />
    );
  }
}

标签： javascripthtmlreactjsredux

解决方案

handleCancelClick通过道具将您的方法传递给您的表单。然后在您的表单中，将其连接到按钮的onClick：

// AddInitiativeForm
<Button
  bsSize="small"
  style={{ width: "48%" }}
  type="button"
  onClick={this.props.onCancel}
>
  Cancel
</Button>;


// InitiativeContainer
render() {
  const { displayForm } = this.state;
  return (
    <AddInitiativeForm
      displaySearch={false}
      onSubmit={this.onSubmit}
      onCancel={this.handleCancelClick}
    />
  );
}

推荐阅读