ReactJS On提交按钮和输入字段的更改类答案

【问题标题】：ReactJS On submit change classes of button and input fieldReactJS On提交按钮和输入字段的更改类
【发布时间】：2019-07-20 09:36:58
【问题描述】：

我有一个表单，当我“提交”表单时，我想在“提交”按钮和输入字段中添加一个属性和一些额外的类

这是我的 handleSubmit 函数

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

      })
}

这是我的表格

<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>

所以在 jQuery 中，我可以使用 $(this).find("someClass") 并做任何我需要用它做的事情。我如何使用 React 实现这一目标？

我想要做的是将输入类更改为 col-md-12 并添加一个 disabled 属性，我想删除 strong>提交按钮而且我有很多表格，因为我已经映射了一个对象

【问题讨论】：

嗨 Innervisions，刚刚给你写了一个解决方案。让我知道这是否有帮助！

标签： reactjs

【解决方案1】：

考虑一个这样的例子：https://codesandbox.io/s/throbbing-bird-ob89o

这个想法是使用您的组件状态来控制要用于标记的类、样式和属性。

在这种情况下，我们定义了一个submitted 状态，并根据它的布尔值，我们可以使用三元运算符来切换我们要渲染的代码。

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);

当您提交表单时，我们会将submitted 状态切换为true。我们的组件重新渲染并重新计算我们标记中的所有三元运算符，例如${submitted ? "col-md-12" : "col-md-5"} 等。

【讨论】：

【解决方案2】：

您也必须使用反应状态来管理类。

例如：

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

更好的是，围绕它创建一个包装器组件，以便可以通过道具控制这些操作 *例如 disabled={true} 将添加类

【讨论】：