I have this button in react

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

But the submit doesn't work, if I delete the onClick, the submit works. How can I make both, the onClick and the submit to work?

This is the onSubmit event:

  handleSubmit(e) {
    e.preventDefault();
    const params = this.state.params || this.props.selected.params;
    const { exportTypes } = this.props;
    const {
      startDate: startDateMoment,
      endDate: endDateMoment,
      panyId,
      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 = { panyId, 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);
  }

I have this button in react

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

But the submit doesn't work, if I delete the onClick, the submit works. How can I make both, the onClick and the submit to work?

This is the onSubmit event:

  handleSubmit(e) {
    e.preventDefault();
    const params = this.state.params || this.props.selected.params;
    const { exportTypes } = this.props;
    const {
      startDate: startDateMoment,
      endDate: endDateMoment,
      panyId,
      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 = { panyId, 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);
  }

• javascript
• reactjs
• events

Share Improve this question Follow edited Oct 31, 2018 at 23:16 Lizz Parody asked Oct 31, 2018 at 23:10 Lizz ParodyLizz Parody 1,7651313 gold badges3232 silver badges5050 bronze badges 3

• 1 It's not an option for you to call handleEditing inside your onSubmit event handler? – Tholle Commented Oct 31, 2018 at 23:12
• I edited the question and it shows the onSubmit event handler, how can I added the handleEditing there? @Tholle – Lizz Parody Commented Oct 31, 2018 at 23:16
• You could invoke it by writing this.handleEditing(); at the end of the handleSubmit function body. – Tholle Commented Oct 31, 2018 at 23:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You could remove the onClick event handler from your Button and invoke the handleEditing method inside your handleSubmit method instead.

Example

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

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

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