Question

这不是this的副本，因为我使用的是受控组件，因此它应该具有target.value。我在给出here的示例后收到此错误，我知道我没有将onClick和onSubmit与'this'绑定（代码在绑定时效果很好），但是我将'this.handleChange'更改为箭头函数'（）=> this.handleChange（）'，对于handleSubmit同样。这应该按照给定的here

起作用

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={() => this.handleChange()}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }


ReactDOM.render(<NameForm />, document.getElementById("root"));

Answer 1

您没有将事件传递给事件处理程序。将onChange={() => this.handleChange()}更改为onChange={(e) => this.handleChange(e)}。

也应该是this.setState({value: event.target.value})而不是this.setState({event.target.value})

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange(event) {
    this.setState({
    value: event.target.value
    });
  }

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={(e) => this.handleChange(e)}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }

ReactDOM.render(<NameForm />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

TypeError：无法读取组件（ReactJS表单）上未定义的属性“值”

1 个答案: