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;

在另一个组件下面，导入并调用（并渲染）到主App组件中。现在，如您所见，我建立了一个方法clickChange，一旦您单击该元素，它就应该更改状态，将“ giovanni”切换为“ joe”。

问题是：为什么它不触发？我知道代码的呈现部分在另一个组件prova中，而状态在我的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>

Answer 2

对于道具，您将在componentWillReceiveProps()中获得它

在子组件中的用法

componentWillReceiveProps(props){
  console.log(props.provaProps);
}

因此，每当父组件的状态得到更新时，它也会同时更新道具，但要在子组件中获取更新的道具，我们将使用componentWillReceiveProps()。

查看更多here

此外，您忘记在道具中附加点击事件

 <div onClick={this.props.onClick}>
    <p>{this.props.provaProp}</p>         
 </div>

Answer 3

因为您尚未在子组件中触发onClick事件。

将Prova component中的代码更改为

     <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>
      </div>

已解决react example here

为什么与道具有关的状态更改不会触发

3 个答案: