反应按钮onClick无法正常运行

Question

can you help me understand why this onClick event does not bind to the button and won't fire?

class DateSlider extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            allValues: this.props.allValues,
        }

        this.onClick = this.onClick.bind(this);
    }

    onClick(){
        console.log('here');
        // this.props.change(event.target.text);
    }

    render(){
        return (
            <div class="date-slider col-xl-4 col-12">
                <div class="row">
                    <div class="date-input-description col-xl-12 col-12">{this.props.unit}</div> 
                    <div class="col-xl-12 date-picker-container">
                        <div class="col-xl-12">
                            <div class="row" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="date-range col-xl-9 col-9">{this.props.initialValue}</div>
                                <div class="col-xl-3 col-9 date-picker-small-button">
                                    <img class="mx-auto d-block" src="./images/small-arrow-down.svg" />
                                </div>
                                <div class="dropdown-menu dropdown-menu-right">
                                    {
                                        //HERE
                                        this.state.allValues.map((value) => {
                                            return <button key={value} class="dropdown-item" type="button" onClick={this.onClick}>{value}</button>

                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        );
    }

} 

When clicking on the item that is rendered, it won't console.log anything.

Answer 1

 this.state.allValues.map((value) => {
    return <button key={value} class="dropdown-item" type="button" onClick={this.onClick}>{value}</button>})  

should be

this.state.allValues.map((value) => {
  return <button key={value} className="dropdown-item" type="button" onClick={this.onClick}>{value}</button>})

In other words: replace the class attribute with className .