Question

我正在使用React JS创建联系表单，这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
  <tbody>
    <tr class="jsgrid-row">
      <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
    </tr>
  </tbody>
</table>

一切似乎都很好，但是代码给出了错误的结果。当我输入以下内容时，

我得到以下结果

无论我在名字字段中输入什么，都会被忽略，并且在结果中会出现空白。我尝试将“姓氏”输入字段移到“名字”输入字段上方，但仍然在控制台中将第一个输入（姓）输入为空白。

Answer 1

我重构了您的代码，一切看起来都很好...

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      firstname: "",
      lastname: "",
      message: ""
    };
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    console.log(this.state);

    this.setState({
      firstname: "",
      lastname: "",
      message: ""
    });
  }

  render() {
    return (
      <div style={{ marginTop: 10 }}>
        <h3>Contact Form</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>First Name: </label>
            <input
              type="text"
              name="firstname"
              className="form-control"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group">
            <label>Last Name: </label>
            <input
              type="text"
              name="lastname"
              className="form-control"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group">
            <label>Message: </label>
            <textarea
              name="message"
              className="form-control"
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group">
            <input type="submit" value="Submit" className="btn btn-primary" />
          </div>
        </form>
      </div>
    );
  }
}

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

Answer 2

您有错字，onChangeFirstname应该有大写字母N onChangeFirstName

React JS输入字段行为异常

2 个答案: