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

只要您在状态中添加# Source: lazy query [?? x 3] # Database: spark_connection x y id <dbl> <dbl> <chr> 1 1 1 /tmp/RtmpnIAUek/tab2.json 2 2 2 /tmp/RtmpnIAUek/tab2.json 3 3 3 /tmp/RtmpnIAUek/tab2.json 4 4 4 /tmp/RtmpnIAUek/tab2.json 5 5 5 /tmp/RtmpnIAUek/tab2.json 6 6 6 /tmp/RtmpnIAUek/tab2.json 7 7 7 /tmp/RtmpnIAUek/tab2.json 8 8 8 /tmp/RtmpnIAUek/tab2.json 9 9 9 /tmp/RtmpnIAUek/tab2.json 10 10 10 /tmp/RtmpnIAUek/tab2.json # ... with more rows ，就可以从技术上致电this.state.handleChange。

但是这并没有真正意义，因为您不希望React跟踪它，并且它可能不会改变（除非您正在做一些handleChange技巧）。

clever

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

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

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

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

Answer 2

当您说this.state.something时，表示该类的状态字段中有内容。当您说this.someFunction时，这意味着类本身在其中。 this在这里指出我们的班级。

class App extends React.Component {
  state = {
    something: "Something",
  }
  
  someFunction = () => console.log(this.state.something);
  
  render() {
    return (
      <div>
        <button onClick={this.someFunction}>Click</button>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

<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="app"></div>

因此，由于该状态中没有this.state.handleChange，因此无法使用handleChange。它是一个函数，属于该类。这就是为什么我们使用this.handleChange。

Answer 3

您可以在状态中存储函数

mix.browserSync({
    proxy: '...',
    files: [ 'public/js/**/*.js', 'public/css/**/*.css' ],
})

然后，如果您想在渲染方法中调用它

constructor(super){
super(props)
 this.state = {
  generateANumber: () => this.setState({ number: Math.floor(Math.random() * 100) }),
  number: 0
 }
}

这是将函数存储为状态的概念。 this.function仅表示该函数属于该类，因此您可以使用render() { return <p> {this.state.number} <button onClick={() => this.state.generateANumber()} Press Me To Generate A New Number </button> </p> } 关键字来使用它。