CODEWITHSUNDEEP
reactjs
Frosty
Frosty

Reputation: 334

ReactJS On submit change classes of button and input field

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

Upvotes: 0

Views: 2647

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

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.

Upvotes: 4

Mobeen
Mobeen

Reputation: 985

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

Upvotes: 0

Related Questions