react 事件

• Z时代
• 2024-01-10
• 分类：综合

<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>

以上是 react 事件 的全部内容， 来源链接： utcz.com/z/381480.html