Redux Form Wizard, кнопка для отправки данных поля JSON?

Question

При использовании Redux Form Wizard на второй странице у меня есть две кнопки, спрашивающие пол пользователя, Мужской или Женский.

Цель: Когда пользователь нажимает кнопку Мужской или Женский, эта кнопка отправляет эту информацию JSON в WizardFormThirdPage,

Вот песочница, модифицированная на примере мастера веб-сайта ReduxForm по этой ссылке.

У меня проблема:

• данные кнопки«Мужской» или «Женский» не сохраняется в магазине (не отправлено) в отличие от других «Рабочих переключателей» под кнопками.

Здесь также находятся соответствующие файлы в Суть ссылки и ниже.Я использую 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>
);

В примере кода используется API Redux Form Field.onChange функция обратного вызова обновит состояние вашей формы значениями male / female, поэтому в родительской форме вы можете получить это значение при отправке формы, а также в других полях (или использовать селектор).

Я не уверен, у меня есть идея полностью, но это должно работать в вашем случае.Надеюсь, это поможет.