ReactJS onClick 不适用于菜单中的第一个元素

Posted 2023-02-23

【中文标题】ReactJS onClick 不适用于菜单中的第一个元素

【英文标题】：ReactJS onClick not working on first element in menu

【发布时间】：2021-10-23 07:33:45

【问题描述】：

我正在 reactjs 中制作自定义下拉列表。当我单击下拉列表中的任何元素时，我会得到它的值并将其放入输入中，它工作得很好。问题是第一个元素什么都不返回，我无法得到它的价值。当我选择其中的任何元素时，我还开发了下拉列表以消失。但就像我说的，它适用于除第一个元素之外的所有元素。

我通过 setTimeOut 解决了这个问题，并在 50 毫秒内隐藏了下拉列表。但我认为这不是一个正确的解决方案。

//Select Component
class Select extends Component 
  showList = (e) => 
    e.target.closest('.select').classList.add('active');
  

  hideList = (e) => 
    setTimeout(() => 
      e.target.closest('.select').classList.remove('active');
    , 100);
  

  selectValue = (e) => 
    let value = e.target.getElementsByTagName('span')[0].innerhtml;
    this.setState( selectValue: value )
  


  render() 
    return (
      <input
        ...this.props
        type="text"
        placeholder=this.props['placeholder']
        onFocus=this.showList
        onBlur=this.hideList
        value=this.state.selectValue
        onChange=this.changeSelectValue
        required
      />
      <div className="select">

        <div className="select-options menu full-width">
          
            this.props.list.map(element => 
              return (
                <MenuItem text=element onClick=(e) => this.selectValue(e) />
              )
            )
          
        </div>
      </div>
    );
  

===================

class MenuItem extends Component 
  constructor(props) 
    super(props);
    this.state = 
  
  render() 
    return (
      <p className="menu-item " + this.props['type']  ...this.props>
        this.props['icon'] ? <i className=this.props['icon'] ></i> : null
        <span>this.props['text']</span>
      </p>
    );
  

【参考方案1】：

1.在使用列表创建菜单项列表时，为每个菜单项组件使用 key prop。 2.而不是在selectValue函数中直接从目标中获取值，而是直接从onClick处理程序中传递值。

selectValue = (e , element) => 
   this.setState( selectValue: element )


<MenuItem text=element key=element onClick=(e) => this.selectValue(e , element) />

已编辑：- 移除 onBlur 处理函数，将 hideList 的功能放在 setState 之后的 selectValue 函数中，如果正常的 setState 不起作用，您可以使用 setState 和回调

selectValue = (e) => 
    let value = e.target.getElementsByTagName('span')[0].innerHTML;
    this.setState( selectValue: value )
    e.target.closest('.select').classList.remove('active');

  

【讨论】：

同样的问题，但获取值的好主意

检查最新的编辑，我认为这会解决你的问题