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

Question

我正在 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>
    );
  }
}

Answer 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');

  }