How to write an handleSubmit function to setState for multiple forms

user_11706254 0
Viewed 716

I am trying to write an handlesubmit function that can change the state for multiple forms. I am having trouble with retrieving the input value and using it in my handlesubmit function. Also when I try to setstate, the values disappear from the table. 

    handleSubmit = (event) => {
        event.preventDefault();
        let value = this.element.value;
        this.setState({[event.target.id]: value});
    }

   <td>
   {this.state.benchMax}
   </td>
   <td>
   {this.state.ohpMax}
   </td>

<td>
<form id="benchMax" onSubmit={this.handleSubmit}>
<input type="number" ref={el => this.element = el}></input>
<input type="submit" value="Update!"></input>
</form>
</td>
<td>
<form id="ohpMax" onSubmit={this.handleSubmit}>
<input type="number" ref={el => this.element = el}></input>
<input type="submit" value="Update!"></input>
</form>
</td>

The results don't display in the table, and the changes aren't tracked.

reactjs html javascript
3 Answers

HandleChange function,

handleChange = event => {
    let value = event.target.value;
    this.setState({[event.target.name]: value})

    event.preventDefault()
    event.stopPropagation()
}

HandlSubmit,

handleSubmit = (event) => {

  //Your code to read values....

  event.preventDefault()
  event.stopPropagation()
}

call handleChange inside input

<input type="number"  name="name1" value={this.state.name1} onChange={this.handleChange} />
user_112655400

Generally, that's not the way you want to construct your forms and receive user-input in a React component.

When creating forms you want to follow this pattern:

user input -> record state -> form submit using state-values

Try this sandbox and see example below: https://codesandbox.io/s/gallant-euler-67w40

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    benchMax: null,
    ohpMax: null,
    submittedBenchMax: null,
    submittedOhpMax: null
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
      submittedBenchMax: this.state.benchMax,
      submittedOhpMax: this.state.ohpMax
    });
  };

  handleOnChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <div>
        <form id="benchMax" onSubmit={this.handleSubmit}>
          <label>Bench</label>
          <input type="number" name="benchMax" onChange={this.handleOnChange} />
          <input type="submit" value="Update!" />
        </form>
        <form id="ohpMax" onSubmit={this.handleSubmit}>
          <label>Overhead</label>
          <input type="number" name="ohpMax" onChange={this.handleOnChange} />
          <input type="submit" value="Update!" />
        </form>
        <div>
          <h4>Max</h4>
          <p>Bench: {this.state.submittedBenchMax}</p>
          <p>Overhead: {this.state.submittedOhpMax}</p>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
user_100309700

When you call setState, it also calls the render function, which will reset the values of your input fields. Additionally, the event.target value refers to the form itself, not the input field. Try using an onChange event with your input field.

user_96386780
Related