Javascript 在react中选择项时，未调用Dropdown onclick

选择下拉项时未调用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的答案，因为他的解决方案是最先发布的。感谢@Utkarshramodgupta和@anshul

最简单的解决方案是：this.showDataTypeName=this.showDataTypeName.bindthis in构造函数

如果您喜欢使用箭头功能自动绑定，可以使用： onClick={=>this.showDataTypeNametype.get'id'，type.get'name}

---

但请记住，出于性能原因，渲染中的绑定不是最佳的。

您需要按如下所示编辑函数

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

编辑

提高性能的更好方法是将click处理程序绑定到ul元素，并利用事件传播来处理click函数。我已经更新了代码以反映同样的情况

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

您必须在单击按钮时指定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>

---

你打电话给onclick的方式不对。下面是正确的代码：

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

---

我不需要绑定函数/对象，因为我使用的是arrow函数；您有onClick={this.showDataTypeName箭头fn看起来像onClick={=>this.showDataTypeName….}嘿，对不起，xadm.placing=>对我有用。请将此作为一个答案，我会“很好地”接受它-你可以接受它，这是一个解决方案，不仅仅是第一个答案，而是作为一个带有注释的线程。它还是一个更干净、更可读性更强的解决方案，比render/onClick Uppolated中的绑定要好？而且可能比u更好，不是最优的，也不比被接受的好onClick中的sing arrow函数。比其他两种解决方案和否决票更好？？为什么您认为这个“=id，name=>=>”有意义？…调用arrow函数来调用arrow函数？添加=>.这个.showDataTypeNametype.get'id'，type.get'name'}>{type.get name'}@HemadriDasari之后，现在工作正常，即使可以工作，也应避免在渲染函数中使用箭头函数。请参阅此->@AnshulBansal感谢您为我指点这篇文章。您使用了两个箭头，这不是箭头函数吗？@HemadriDasari，是的，它使用箭头函数，但不在渲染函数内部。我使用的两个arrow函数用于创建闭包。简单地说，第一个函数返回一个匿名函数，稍后在执行单击操作时调用该函数。这是在需要向箭头函数传递参数时使用箭头函数的另一种方法@l4b0mb4:当我推送到数据类型时，我已经有了标记的onClick处理程序。添加=>后，它现在工作正常。this.showDataTypeNametype.get'id'，type.get'name'}>{type.get'name'}当showDataTypeName已经是一个箭头函数时，我不需要绑定它。添加=>后，它现在工作正常。this.showDataTypeNametype.get'id'，type.get'name}>{type.get'name}。xadm注释是正确的，它与绑定无关。这是关于onClick处理程序采用函数名而不是返回值。在代码中，您正在行本身上执行函数，这将分配showDataTypeName函数的返回值，而不是函数本身。只要按照我的建议去做，我保证会成功的我同意这一点，但只是在onClick={=>this.showDataTypeNametype.get'id'，type.get'name}中放置=>而不使用绑定。是的，如果不想使用绑定，这也是一种方法