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

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

javascript reactjs

Javascript 单击一个组件中的按钮不会改变React.js中其他组件中的值,javascript,reactjs,Javascript,Reactjs,我试图使按钮在React.js中增加一个值，以了解两个组件之间的通信。一个组件只是一个显示+1的按钮，另一个组件是一个值，单击该按钮将递增我已经写了这段代码，但无法找到为什么不显示值注意：我在React.js中只有一天的经验这是我的密码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <b

我试图使按钮在React.js中增加一个值，以了解两个组件之间的通信。一个组件只是一个显示+1的按钮，另一个组件是一个值，单击该按钮将递增

我已经写了这段代码，但无法找到为什么不显示值

注意：我在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>


var按钮=React.createClass({
render:function（）{
返回(
+1
)
}
});
var Counter=React.createClass({
render:function（）{
return（Hello{this.props.updValue}）；
} 
}); 
var App=React.createClass({
getInitialState:函数（）{
返回{count:0}；
},
增量：函数（）{
this.setState（{计数器：this.state.count+1}）；
},
render:function（）{
报税表（
);
}
});
ReactDOM.render（）
编辑：在学习了Piotr Berebecki的代码后，我修改了现有代码，添加了点击的值。
请查看此演示：以及下面的React代码


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

在您使用的increment（）
函数中

this.setState（{counter:this.state.count+1}）
并且它应该是this.setState（{count:this.state.count+1}）

在App
render方法中，您使用了onClick
事件。这应该在按钮
组件本身的渲染方法中
您还需要一个从父（应用程序
）传递给子（按钮
）的道具（为了清晰起见，我将其命名为passClick
）。然后，按钮可以在其handleClick（）
方法中使用此道具。然后，调用increment（）
方法的App
将接收到该信息


反应代码：
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>
    );
  }
});

var按钮=React.createClass({
handleClick:function（）{
console.log（'1.收到点击按钮'）；
this.props.passClick（）；
},
render:function（）{
返回(
+1
)
}
});
var Counter=React.createClass({
render:function（）{
return（Hello{this.props.updValue}）；
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
计数：0
};
},
增量：函数（）{
这是我的国家({
计数：this.state.count+1
});
console.log（'2.收到应用程序中的点击'）；
},
render:function（）{
返回(
);
}
});
您从未实际更改文本，因此它从未从+1更改，您只需设置状态…实际上我不想更改按钮中的文本。。。我想要的东西，点击+1按钮，打招呼后，它应该来1..2..3等…希望你现在得到我。谢谢你纠正我的代码，也给我更好的代码在Codepen。这真的很有帮助。