ReactJS On submit change classes of button and input field

Question

I have a form and when I "Submit" the form I want to add an attribute and some extra classes to the "submit" button and the input field

This is my handleSubmit function

handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    axios.post(`MyPostUrl`,formData)
      .then(res => {

      })
}

This is my form

<form onSubmit={this.handleSubmit} method="POST">       
    <div className="form-row">
        <input required min="1" max="10" name="grade" className="form-control col-md-5" type="number" />
        <button className="btn btn-outline-primary col-md-6">
            Grade
        </button>
    </div>
</form>

So in let's say jQuery i could just go $(this).find("someClass") and do what ever i need to do with it. How can i achieve this with React?

What I'm trying to do is change the input class to col-md-12 and add an disabled attribute and I want to remove the button on submit And I have a lot of forms since I've mapped over an object

Hi Innervisions, just wrote you a solution. Let me know if that helps! — Cat_Enthusiast
– Cat_Enthusiast, Commented Jul 20, 2019 at 10:14

Cat_Enthusiast · Accepted Answer · 2019-07-20 10:14:27Z

Consider an example like this: https://codesandbox.io/s/throbbing-bird-ob89o

The idea is to use your component-state to control what classes, styles and attributes to use for your markup.

In this case, we define a submitted state and depending on its Boolean-value, we can use ternary operators to toggle the code we want to render.

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

import "./styles.css";

class App extends React.Component {
  state = {
    grade: "",
    submitted: false
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
      submitted: true
    });
  };

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

  render() {
    const { submitted, grade } = this.state;
    return (
      <form onSubmit={this.handleSubmit} method="POST">
        <div className="form-row">
          <input
            required
            onChange={this.handleOnChange}
            min="1"
            max="10"
            name="grade"
            className={`form-control ${submitted ? "col-md-12" : "col-md-5"}`}
            value={grade}
            type="number"
            disabled={submitted}
          />
          {!submitted ? (
            <button className="btn btn-outline-primary col-md-6">Grade</button>
          ) : (
            ""
          )}
        </div>
      </form>
    );
  }
}

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

When you submit the form, we toggle the submitted state to true. Our component re-renders and that recalculates all the ternary operators in our mark-up like ${submitted ? "col-md-12" : "col-md-5"} and etc.

Mobeen · Accepted Answer · 2019-07-20 10:02:38Z

0

You would have to use react states for managing classes too.

e.g:

<button className={this.state.buttonClass}>
     Grade
</button>

Better yet, create a wrapper component around it so that these actions can be controlled via props *e.g disabled={true} would add class

edited Jul 20, 2019 at 10:02

answered Jul 20, 2019 at 9:41

Mobeen

9852 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

ReactJS On submit change classes of button and input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related