javascript - ReactJS 中的 this.state.function 和 this.function 有什么区别

Question

我正在学习 React 中状态的概念。我试图了解使用 this.handleChange 和 this.state.handleChange 之间的区别。

如果有人能向我解释两者之间的确切区别，以及为什么 this.state.handleChange 不起作用，我将不胜感激？

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        < GetInput input={this.state.inputValue} handleChange={this.handleChange} />
        { /* this.handleChanges, and this.state.handleChanges */ }
         < RenderInput input={this.state.inputValue} />
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

Answer 1

只要在状态中添加 handleChange，技术上就可以调用 this.state.handleChange。

但这实际上没有意义，因为您不希望 React 跟踪它，并且它可能不会改变(除非您正在做一些聪明的技巧)。

  constructor(props) {
    super(props);
    this.state = {
      handleChange: e => {
        e.preventDefault();
        console.log("this.state.handleChange");
      }
    };
  }

通常会在类中声明一个成员函数。

  handleChange = e => {
    e.preventDefault();
    console.log("this.handleChange");
  };

这是完整的工作代码
(工作演示可在 CodeSandBox 上获得)。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      handleChange: e => {
        e.preventDefault();
        console.log("this.state.handleChange");
      }
    };
  }

  handleChange = e => {
    e.preventDefault();
    console.log("this.handleChange");
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={this.handleChange}>this.handleChange</button>
        <button onClick={this.state.handleChange}>
          this.state.handleChange
        </button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);