react子組件向父組件傳值

本文轉載自查看原文 2019-03-29 16:06 1692 react

子組件向父組件傳值，注意父組件傳遞函數的時候必須綁定this到當前父組件（handleEmail={this.handleEmail.bind(this)}），不然會報錯

/***實現在輸入框輸入郵箱時，在div中即時顯示輸入內容***/


<body>
    <div id="test"></div>
</body>

//子組件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                郵箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});

//父組件
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>郵箱：{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 react typescript 子組件給父組件傳值 react native 子組件向父組件傳值 React子組件與父組件傳值【react】子組件向父組件傳值 react 子組件給父組件傳值 react中父組件給子組件傳值 react 父組件給子組件傳值 react子組件向父組件傳值 React-組件嵌套-子組件通過委托向父組件傳值 react 入坑學習（八）Hooks React 父組件向子組件傳值 react hooks子給父傳值