Redux Form Wizard，按钮发送json字段数据？答案

【问题标题】：Redux Form Wizard, button to send json field data?Redux Form Wizard，按钮发送json字段数据？
【发布时间】：2018-10-14 16:14:04
【问题描述】：

在第二页使用 Redux 表单向导时，我有两个按钮询问用户性别，男性或女性。

目标：当用户单击男性或女性按钮时，该按钮将该 json 信息发送到 WizardFormThirdPage。

这是一个从ReduxForm website Wizard example at this link.修改的沙盒

我有一个问题：

与按钮下的其他“Working Radio Button”不同，“Male”或“Female”的按钮数据不会保存在商店中（未发送）。

这里也是gist link 及以下的相关文件。我正在为我的编辑器使用 VS Code。

有什么想法吗？谢谢！

WizardFormSecondPage.js

class Test extends Component {
  constructor() {
    super();
    this.state = {
      buttonText1: false,
      buttonText2: false
    };
  }

  changeTextColor(value) {
    if (value === 1)
      this.setState({
        buttonText1: !this.state.buttonText1,
        buttonText2: false
      });
    else
      this.setState({
        buttonText1: false,
        buttonText2: !this.state.buttonText2
      });
  }

  render() {
    const {
      input: { value, onChange }
    } = this.props;
    console.log("this props shows blah", this.props);
    return (
      <div>
        <button
          type="button"
          className={this.state.buttonText1 ? "orangeTextButton" : ""}
          onClick={() => this.changeTextColor(1)}
        >
          Male
        </button>
        <button
          type="button"
          className={this.state.buttonText2 ? "orangeTextButton" : ""}
          onClick={() => this.changeTextColor(2)}
        >
          Female
        </button>
      </div>
    );
  }
}

const renderError = ({ meta: { touched, error } }) =>
  touched && error ? <span>{error}</span> : false;

const WizardFormSecondPage = props => {
  const { handleSubmit, previousPage } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>What is your gender?</label>
        <div>
          <Field name="sex" component={Test} value="male" />

          <label>
            <Field name="sex" component="input" type="radio" value="female" />{" "}
            Working Radio Button
          </label>
          <Field name="sex" component={renderError} />
        </div>
      </div>
      <div>
        <button type="button" className="previous" onClick={previousPage}>
          Previous
        </button>
        <button type="submit" className="next">
          Next
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "wizard", //Form name is same
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormSecondPage);

W2.scss

  button{
    width: 80px;
    height: 40px;
    margin: 15px;
  }

  .blackTextButton{
    /* background-color: white; */
    color: black;
  }

  .orangeTextButton{
    /* background-color: white; */
    color: orange;
  }

【问题讨论】：

可以查看redux-forms的handleSubmit功能[链接]redux-form.com/7.4.2/docs/faq/handlevson.md

标签： javascript reactjs redux-form wizard

【解决方案1】：

您可能不需要Test 组件的状态。相反，您可以创建一个新的无状态组件：

const Test = ({ input: { value, onChange } }) => (
  <div>
    <button
      type="button"
      className={value === 'male' ? 'orangeTextButton' : ''}
      onClick={() => onChange('male')}
    >
      Male
    </button>
    <button
      type="button"
      className={value === 'female'  ? 'orangeTextButton' : ''}
      onClick={() => onChange('female')}
    >
      Female
    </button>
  </div>
);

示例代码使用 Redux 表单字段 API。 onChange 回调将使用 male/female 值更新表单的状态，因此在父表单中，您可以在表单提交以及其他字段（或使用选择器）中检索此值。

我不确定，我已经完全理解了，但这应该适用于你的情况。希望对您有所帮助。

【讨论】：