如果与道具有关,改变状态的原因不会触发

Question

我在React中编写了一些代码来练习.我希望有人解释一下为什么如果clickChange单击目标(h3),状态不会更新.

下面是我的主要App组件:

import React, { Component } from "react";
import Prova from "./components/prova";
import "./App.css";

class App extends Component {
  state = {
    name: "giovanni"
  };

  clickChange = () => {
    this.setState({ name: "joe" });
  };

  render() {
    return (
      <div>
        <h3>SONO APP</h3>
        <Prova onClick={this.clickChange} provaProp={this.state.name} />
      </div>
    );
  }
}

export default App;

在另一个Component下面,导入并调用(和渲染)到主App组件中.现在,你可以看到我设置了一个方法,clickChange一旦你点击元素,它应该改变状态,将"giovanni"切换为"joe".

问题是:为什么它不会触发？我知道它在另一个组件中的代码的渲染部分,但是它在我的App组件中的状态.因此,状态在内部改变,而不涉及外部.

import React, { Component } from "react";

class Prova extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>{this.props.provaProp}</p>
      </div>
    );
  }
}

export default Prova;

Answer 1

我想你只是忘了触发组件onClick内的事件Prova.

import React, { Component } from 'react';

class Prova extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>         
      </div>
    )
  }
}

export default Prova;

演示

class App extends React.Component {
  state = {
    name: "giovanni"
  };

  clickChange = () => {
    this.setState({ name: "joe" });
  };

  render() {
    return (
      <div>
        <h3>SONO APP</h3>
        <Prova onClick={this.clickChange} provaProp={this.state.name} />
      </div>
    );
  }
}

class Prova extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>
      </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>