Question

我正在尝试使用Save按钮制作两个简单的表单以在React中工作，但似乎Save按钮组件无法看到这两种表单。

我的Form组件如下：

import React from "react";
import { Field, reduxForm } from "redux-form";

const validate = values => {
  const errors = {};
  if (!values.name) {
    errors.name = "Required";
  }

  if (!values.age) {
    errors.age = "Required";
  }

  return errors;
};

const renderField = ({
  input,
  label,
  type,
  value,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched && (error && <span className="error">{error}</span>)}
    </div>
  </div>
);

const Form1 = props => {
  const { handleSubmit } = props;
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Field name="name" component={renderField} type="text" label="Name" />
        <Field name="age" component={renderField} type="text" label="Age" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default reduxForm({
  form: "step1", // a unique identifier for this form
  validate
})(Form1);

我的SaveButton如下：

import React, { Component } from "react";

export default class SaveButton extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.submit = this.submit.bind(this);
  }

  submit() {
    console.log(this.props);
    const { dispatch, forms } = this.props;

    forms.forEach(({ formName, isValid, values, errors }) => {
      if (isValid) {
        console.log(values);
      } else {
        //        dispatch(touch(formName, ...Object.keys(errors)));
      }
    });
  }

  render() {
    return (
      <button type="button" onClick={this.submit}>
        Save
      </button>
    );
  }
}

Sandbox example

单击Save会得到Cannot read property 'forEach' of undefined，因为forms未定义并且this.props为空。有人知道为什么无法从SaveButton中看到表格吗？

Answer 1

这是因为您的“保存”按钮不是form元素的一部分。因此，要获取价值，您必须手动进行。这是我的方法，

我将通过handleSave作为prop的{{1}}函数，

App.js

在import React, { Component } from "react"; import "./App.css"; import Form1 from "./components/form1/Form"; import Form2 from "./components/form2/Form"; import SaveButton from "./components/SaveButton"; import { connect } from "react-redux"; import { submit, isValid, getFormNames, getFormValues, getFormSyncErrors, touch } from "redux-form"; class App extends Component { constructor(props) { super(props); } render() { return ( <div className="App"> <header className="App-header"> <h1 className="App-title">Welcome to React</h1> </header> <div className="App-intro"> Form 1: <Form1 onSubmit={this.step1} /> <hr /> Form : 2 <Form2 onSubmit={this.step2} /> <hr /> <SaveButton handleSave={this.handleSave} /> </div> </div> ); } step1(values) { console.log(values); } step2(values) { console.log(values); } handleSave = () => { const { dispatch, forms } = this.props; console.log(forms); forms.forEach(({ formName, isValid, values, errors }) => { if (isValid) { console.log(values); } else { // dispatch(touch(formName, ...Object.keys(errors))); } }); } } const mapStateToProps = state => { return { forms: getFormNames()(state).map(formName => ({ formName, isValid: isValid(formName)(state), values: getFormValues(formName)(state), errors: getFormSyncErrors(formName)(state) })) }; }; export default connect(mapStateToProps)(App);`中，我将简单地调用该函数，

SaveButton.js

在React中处理多种形式

1 个答案: