點擊一個組件中的按鈕不會改變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

來源

2016-09-22 Tushar Khanna

你從來沒有真正更改文本，所以它永遠不會改變從+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> 
    ); 
    } 
});

來源

2016-09-22 06:11:12

感謝您糾正我的代碼，並在Codepen中給我更好的代碼。這真的很有幫助。 –

點擊一個組件中的按鈕不會改變React.js中其他組件的值

回答

相關問題