Question

你能帮助我理解为什么这个onClick事件不会绑定到button并且不会触发吗？

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>
        );
    }

}

点击渲染的项目时，它不会console.log任何内容。

Answer 1

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

应该是

class

换句话说：将className属性替换为function getNum(str) { return /[-+]?[0-9]*\.?[0-9]+/.test(str)?parseFloat(str):0; }。

React按钮onClick无法正常运行

1 个答案: