javascript - Redux 表单向导，发送 json 字段数据的按钮？

Question

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

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

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

我有一个问题:

• 与按钮下的其他“工作单选按钮”不同，“男性”或“女性”按钮数据不会保存在商店中(未发送)。

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;
  }

Answer 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 Form Field API。 onChange 回调将使用 male/female 值更新您的表单状态，因此在父表单中您可以在表单提交时检索此值以及其他字段(或使用选择器)。

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