通过单击按钮元素来检查复选框

时间:2020-07-02 09:51:49

标签: javascript reactjs

我正在修订Core React.js概念,并且很难做到这一点。 我有一个显示复选框的App组件,一个显示消息和计数器值的div部分以及两个用于更改div部分消息并增加计数器的按钮 该组件具有消息,计数器和主题的状态数据。

我要实现的是这个。 首先,我想通过使用preventDefault防止复选框默认行为 其次,我想通过单击组件的按钮元素之一来将复选框从未选中切换为选中。

这是我写的代码

import React, { Component } from 'react';

export default class App extends Component {

    constructor(props) {
        super (props);
        this.state = {
            message: 'Ready',
            counter: 0,
            theme: 'secondary'
        }
    }

    handleEvent = (event, newTheme) => {
        event.persist();
        this.setState({ 
            counter: this.state.counter + 1,
            theme: newTheme
        },() => {
            this.setState({ message: `${event.type}: ${this.state.counter}`});
            this.toggleCheckBox()
        });
    }

    toggleCheckBox = (event) => {
        if (this.state.counter === 0) {
            event.preventDefault();
        }
    }

    render() {
        return (
            <div className="m-2">
                <div className="form-check">
                    <input className="form-check-input" type="checkbox"
                        onClick={ this.toggleCheckBox } />
                    <label>This is a checkbox</label>
                </div>
                <div className={ `h4 bg-${this.state.theme} 
                                    text-white text-center p-2`}>
                    { this.state.message }
                </div>
                <div className="text-center">
                    <button className="btn btn-primary"
                            onClick={ (e) => this.handleEvent(e, "primary") }>
                            Normal
                    </button>
                    <button className="btn btn-danger m-1"
                            onClick={ (e) => this.handleEvent(e, "danger") }>
                            Danger
                    </button>
                </div>
            </div>
        )
    }
}

0 个答案:

没有答案