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

问题描述：

我想让按钮增加React.js中的值来学习两个组件之间的通信。一个组件只是一个显示+1的按钮，其他组件是一个值，单击该按钮将增加一个值。点击一个组件中的按钮不会改变React.js中其他组件的值

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

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

这里是我的代码：

<!DOCTYPE html> 
<html> 

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

    </head> 

    <body> 
    <div id="root"></div> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/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）

编辑：从彼得·Berebecki的代码学习后，我已经修改现有的代码由上点击已经取得的价值增加。 https://plnkr.co/edit/VL5961FB0mrm4QlxuO9T

你从来没有真正更改文本，所以它永远不会改变从+1，您只需设置状态...... – Li357

其实我不想在按钮更改文本。 ..我想要点击+1按钮的东西，之后你好它应该来1..2 ... 3等......希望你现在得到了我。 –

答

请查看本演示：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组件本身的渲染方法中。
您还需要一个从父母（App）传递给孩子（Button）的道具（我为了清晰起见而命名为passClick）。 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> 
    ); 
    } 
});

感谢您纠正我的代码，并在Codepen中给我更好的代码。这真的很有帮助。 –

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

相关推荐