Question

我想通过输入的值更改state，但它是undefined。应该可以，每个HTML标记的值都可以，所以我的代码有什么问题？

import React, { Component } from "react";
class App extends Component {
  constructor() {
    super();
    this.state = {
      firstName: " "
    };
    this.handleChange = this.handleChange(this);
  }
  handleChange(event) {
    this.setState({
      firstName: event.target.value
    });
  }
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Firstname"
          onChange={this.handleChange}
        />
        <h1>{this.state.value}</h1>
      </form>
    );
  }
}
export default App;

Answer 1

您的状态中没有存储value，因此是未定义的，因此您没有正确地将this绑定到处理程序。改为输出this.state.firstName：

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      firstName: " "
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Firstname"
          onChange={this.handleChange}
        />
        <h1>{this.state.firstName}</h1>
      </form>
    );
  }
}

export default App;

Answer 2

首先尝试使用箭头功能将 this 绑定到handleChange。还可以使用状态变量来设置输入的value属性。

沙盒链接：https://codesandbox.io/s/react-basic-example-qmyw5

import React, { Component } from "react";
class App extends Component {
  constructor() {
    super();
    this.state = {
      firstName: " "
    };
  }

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

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Firstname"
          onChange={this.handleChange}
          value={this.state.firstName}
        />
        <h1>{this.state.firstName}</h1>
      </form>
    );
  }
}
export default App;

为什么reactjs处的输入值未定义？

2 个答案: