Форма Redux: как обращаться с несколькими кнопками?

Я пытаюсь добавить вторую кнопку отправки в редукционную форму.

Обе кнопки должны отправить действие, которое сохраняет данные, но в зависимости от нажатой кнопки пользователь должен быть перенаправлен на разные страницы.

Поэтому я определил обработчик, который я onSubmit как onSubmit prop в форму.

Но насколько я могу видеть, только данные формы передаются этому обработчику:

Документы на handleSubmit note:

Функция, которая должна быть передана <form onSubmit={handleSubmit}> или <button onClick={handleSubmit}>. Он выполнит проверку, как синхронизацию, так и асинхронную, и, если форма верна, она вызовет this.props.onSubmit(data) с содержимым данных формы.

То, что мне не хватает, - это способ также передать информацию о нажатой кнопке (например, событие click) моему обработчику onSubmit, чтобы я мог сохранять и маршрутизировать по назначению.

Ответ 1

Есть много способов сделать это, но все они связаны с добавлением данных кнопки в зависимости от того, какая кнопка была нажата. Здесь встроенная версия.

class Morpheus extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        Fields go here
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'blue'
          }))}>Blue Pill</button>
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'red'
          }))}>Red Pill</button>
      </div>
    );
  }
}

export default reduxForm({
  form: 'morpheus'
})(Morpheus)

handleSubmit обрабатывает все проверки валидации и еще много чего, и если все действительно, оно вызывается функцией, присвоенной ему значениями формы. Таким образом, мы предоставляем ему функцию, добавляющую дополнительную информацию и вызывающую onSubmit().

Ответ 2

@mibbit onSubmit - это функция, которую вы определяете (по крайней мере, это то, что говорит док: посмотрите метод onSubmit). Это для редукционной формы 7.x, приведенной ниже в примере @Erik R.

    class Morpheus extends Component {
    constructor(props) {
        super(props);

        this.state = {};
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values, pill) {
        // do magic here
    }

    render() {
        const {
            handleSubmit
        } = this.props;
        return ( <
            div >
            Fields go here <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'blue'
                    }))
            } > Blue Pill < /button> <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'red'
                    }))
            } > Red Pill < /button> <
            /div>
        );
    }
}

export default reduxForm({
    form: 'morpheus'
})(Morpheus)