Question

我正在尝试让Button在React.js中增加一个值来学习两个组件之间的通信。 One Component只是一个显示+1的Button，而其他组件是一个Value，它将在点击该按钮时递增。

我已编写此代码，但无法找到未显示值的原因。

注意：我在React.js中只有一天的经验。

这是我的代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>

    <script type="text/babel">
      var Button = React.createClass({
        render : function(){
          return (
            <button>+1</button>
          )
        }
      });

      var Counter = React.createClass({
        render : function(){
          return (<div>Hello {this.props.updValue}</div>); 
        } 
      }); 

      var App = React.createClass({
        getInitialState : function(){
          return {count : 0 };
        },
        increment : function(){
          this.setState({counter:this.state.count + 1});
        },
        render: function(){
          return ( 
            <div>
                <Button onClick={this.increment} updValue={this.state.count}/>
                <Counter />
            </div>
            );
        }
      });

      ReactDOM.render(<App />,document.getElementById("root"));
    </script>
  </body>

</html>

（https://plnkr.co/edit/SVTfEc5jx5Q15B1c07GB）

编辑：从Piotr Berebecki的代码中学习后，我修改了现有代码，以便按照Click的值进行添加。 https://plnkr.co/edit/VL5961FB0mrm4QlxuO9T

Answer 1

请查看此演示：http://codepen.io/PiotrBerebecki/pen/NRdAON以及下面的React代码。

我在你的代码中注意到的问题：

在您使用的increment()功能中 this.setState({counter:this.state.count + 1});，应为this.setState({count:this.state.count + 1});
在App渲染方法中，您使用了onClick事件。这应该在Button组件本身的render方法中。
您还需要一个从父（passClick）传递给子（App）的道具（我将其命名为清晰度Button）。然后Button可以在其handleClick()方法中使用此道具。然后，App调用increment()方法将收到此信息。

反应代码：

var Button = React.createClass({
  handleClick: function() {
    console.log('1. Received click in Button');
    this.props.passClick();
  },
  render: function() {
    return (
      <button onClick={this.handleClick} >+1</button>
    )
  }
});

var Counter = React.createClass({
  render: function() {
    return (<div>Hello {this.props.updValue}</div>);
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  increment: function() {
    this.setState({
      count: this.state.count + 1
    });
    console.log('2. Received click in App');

  },
  render: function() {
    return (
      <div>
        <Button passClick={this.increment}/>
        <Counter updValue={this.state.count}/>
      </div>
    );
  }
});

单击一个组件中的按钮不会更改React.js中其他组件中的值

1 个答案: