Question

当我选择下拉项时，不会调用onlick事件处理程序。

我正在componentDidMount()中循环生成下拉列表，并在生成下拉列表时将事件处理函数“ showDataTypeName” 传递给onclick，但是由于某种原因，它没有被调用。知道为什么这失败了吗？

下面是我生成下拉菜单的组件

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    componentDidMount(){
        let dataTypes = [];
        let content = this.state.rows.slice();    
        if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
            this.props.apiPropertiesSuccess.map((type, i) => {
                dataTypes.push(<li key={type.get('id')}><a onClick = {this.showDataTypeName(type.get('id'), type.get('name'))}> {type.get('name')} </a></li>)
            });
        }


        for(let i=0; i < this.props.params.length; i++){
            content.push(<div>
                <div className="col-md-6">
                    <TextInput size="medium" value={this.props.params[i]} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        }

        this.setState({rows:content})
    }
    showDataTypeName = (id, name) => {
        console.log("id, name", id, name)
        this.props.handleDataTypes(id, name);
        this.setState({
            dataTypeName: name
        });
    }

    render(){
        const {params, apiPropertiesSuccess} = this.props;     

        return(
            <div>
                {this.state.rows}
            </div>
        )
    }
}

注意：之所以接受xadm的答案，是因为他的解决方案首先发布了。还要感谢@UtkarshPramodGupta和@anshul。

Answer 1

您没有以正确的方式调用onclick。下面是正确的代码：

<a onClick = {this.showDataTypeName.bind(this, type.get('id'), type.get('name'))}>

Answer 2

您需要按如下所示编辑功能。

showDataTypeName = (id, name) => () => {
        console.log("id, name", id, name)
        this.props.handleDataTypes(id, name);
        this.setState({
            dataTypeName: name
        });
    }

编辑

一种更好的性能改进方法是将点击处理程序绑定到ul元素，并利用事件传播来处理点击功能。我已经更新了代码以反映相同的内容。

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    componentDidMount(){
        let dataTypes = [];
        let content = this.state.rows.slice();    
        if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
            this.props.apiPropertiesSuccess.map((type, i) => {
                dataTypes.push(
                    <li key={type.get('id')} id={type.get('id')} name=type.get('name')>
                    {type.get('name')}
                </li>);
            });
        }


        for(let i=0; i < this.props.params.length; i++){
            content.push(<div>
                <div className="col-md-6">
                    <TextInput size="medium" value={this.props.params[i]} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu" onClick={this.showDataTypeName}>
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        }

        this.setState({rows:content})
    }
    showDataTypeName = (event) => {
        let id = event.target.id;
        let name = event.target.name;
        console.log("id, name", id, name)
        this.props.handleDataTypes(id, name);
        this.setState({
            dataTypeName: name
        });
    }

    render(){
        const {params, apiPropertiesSuccess} = this.props;     

        return(
            <div>
                {this.state.rows}
            </div>
        )
    }
}

Answer 3

您必须在点击按钮时指定onClick事件

<div className="dropdown">
    <button onClick={() => console.log('yeah')} className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                                <span className="caret"></span>
                            </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>

Answer 4

最简单的解决方案（反应文档）：构造函数中的this.showDataTypeName = this.showDataTypeName.bind(this)

如果您喜欢使用箭头功能（自动绑定），则可以使用： onClick={ () => this.showDataTypeName(type.get('id'), type.get('name')) }

但是请记住，出于性能方面的考虑，渲染中的绑定并不是最佳选择。

当在反应中选择项目时，不会调用下拉onclick

4 个答案: