react 事件

Posted 2021-06-23 天行子

<div id="example"></div>
<script type="text/babel">
    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isToggleOn: true};

            // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.setState(prevState => ({
                isToggleOn: !prevState.isToggleOn
            }));
        }

        render() {
            return (
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? \'ON\' : \'OFF\'}
                </button>
            );
        }
    }

    ReactDOM.render(
        <Toggle />,
        document.getElementById(\'example\')
    );
</script>

<div id="root"></div>

<script type="text/babel">
    function UserGreeting(props) {
        return <h1>Welcome back!</h1>;
    }

    function GuestGreeting(props) {
        return <h1>Please sign up.</h1>;
    }

    function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if (isLoggedIn) {
            return <UserGreeting />;
        }
        return <GuestGreeting />;
    }

    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>
                Login
            </button>
        );
    }

    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>
                Logout
            </button>
        );
    }

    class LoginControl extends React.Component{

        constructor(props){
            super(props);
            this.handleLoginClick = this.handleLoginClick.bind(this);
            this.handleLogoutClick = this.handleLogoutClick.bind(this);
            this.state = {isLoggedIn:false}
        }

        handleLoginClick(){
            this.setState({isLoggedIn:true});
        }

        handleLogoutClick(){
            this.setState({isLoggedIn:false});
        }

        render(){
            const isLoggedIn = this.state.isLoggedIn;
            let button;
            if(isLoggedIn){
                button = <LogoutButton onClick={this.handleLogoutClick} />;
            }else{
                button = <LoginButton onClick={this.handleLoginClick} />
            }

            return(
                <div>
                    <Greeting isLoggedIn={isLoggedIn} />
                    {button}
                </div>
            )
        }
    }
    const element = <LoginControl />;
    ReactDOM.render(
        element,
        document.getElementById(\'root\')
    );
</script>