Question

我很反应。

我想根据状态显示列表。如果 showList 为true，则显示列表，反之亦然。但是当我单击list元素时， selectItem 方法不会被触发，列表也会消失。

但 toggleList 方法正在运行，尽管两种方法的处理方式相同。我尝试将 selectItem 作为匿名方法，也将它绑定在constructr中，但没有运气。

有人可以给我一个有效的代码吗？

import React from 'react';

export default class Select extends React.Component {

    constructor(props){
        super(props);
        this.state={
            list:[],
            showList:false,
            selectedItem:''
        }

        // this.selectItem = this.selectItem.bind(this)
    }

    toggleList(e, toggle){
        this.setState({showList:toggle})
    }

    selectItem(e, item){
        alert('')
        this.setState({selectedItem:item.name})
    }


    render(){
        let {showList,selectedItem} = this.state;
        let _this = this;
        let arr = [
            {
                name:'Piyush',
                value: '2'
            }
        ]
        return (
            <div>
                <input type="text"
                       onClick={e=>this.toggleList(e, true)}
                       onBlur={e=>this.toggleList(e,false)}
                       value={selectedItem.name}
                />

                {
                    showList &&
                        <div style={{backgroundColor:'#fff', color:'#333', zIndex:9999}}>
                            <ul>
                                {
                                    arr.map(item=>{
                                        return <li key={item.value} id={item.value} onClick={(e)=>this.selectItem(e)}> {item.name} </li>
                                    })
                                }
                            </ul>
                        </div>

                }
            </div>

        )
    }
}

Answer 1

如果您删除blur事件，则会弹出警告（请参阅this sandbox）。换句话说，onBlur优先于onClick。它首先隐藏列表，然后尝试处理点击，但到那时列表已经从DOM中删除，因此您不会看到该项目被选中。你需要修改你的逻辑。也许使用传统的<select>？

动态列表的onClick在React中不起作用？

1 个答案: