javascript - 通过单击 Button 元素检查 CheckBox

Question

我正在修改 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>
        )
    }
}

标签： javascriptreactjs