Добавить onClick к кнопке отправки в React

Question

У меня есть эта кнопка реагирует

  {editing && (
    <Button extraClasses="m1" onClick={this.handleEditing} type="submit">
      Save
    </Button>
  )}

Но отправка не работает, если я удаляю onClick, отправка работает. Как сделать так, чтобы onClick и Submit работали?

Это событие onSubmit:

  handleSubmit(e) {
    e.preventDefault();
    const params = this.state.params || this.props.selected.params;
    const { exportTypes } = this.props;
    const {
      startDate: startDateMoment,
      endDate: endDateMoment,
      companyId,
      exportTypeId,
      id,
    } = this.state;
    const type = exportTypes.find(o => o.id === Number(exportTypeId));
    let enrichedParams = [];

    if (type.params.length > 0) {
      enrichedParams = params.reduce((acc, { paramName, paramValue }) => {
        const { id: exportParameterId } = type.params.find(p => p.name === paramName);
        return [...acc, { exportParameterId, paramName, paramValue }];
      }, []);
    }

    const startDate = startDateMoment.format();
    const endDate = endDateMoment.format();
    const record = { companyId, exportTypeId, startDate, endDate, id, params: enrichedParams };
    const filteredQuery = Object.keys(record).reduce(
      (acc, k) => (record[k] ? { ...acc, [k]: record[k] } : acc),
      {},
    );
    if (!Object.keys(filteredQuery).length) return;
    this.props.updateExport(filteredQuery);
  }

Answer 1

Вы можете удалить обработчик событий onClick из вашего Button и вместо этого вызвать метод handleEditing внутри метода handleSubmit.

Пример

class App extends React.Component {
  handleEditing = () => {
    // ...
  };

  handleSubmit = (e) => {
    // ...
    this.handleEditing();
  };

  render() {
    return (
      <div>
        {/* ... */}
        {editing && (
          <Button extraClasses="m1" type="submit">
            Save
          </Button>
        )}
        {/* ... */}
      </div>
    );
  }
}