Question

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

这是我的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 属性，而我想删除提交按钮自从我映射到对象上以来，我有很多形式

Answer 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"}等。

Answer 2

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

例如：

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

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

ReactJS在提交按钮和输入字段的更改类

2 个答案: