javascript - React JS，单击显示元素的下拉列表

Question

我的问题是关于尝试在单击 span 元素时显示静态下拉列表，但是如何在不附加任何新 DOM 的情况下仅显示单击元素的下拉列表(并关闭打开的下拉列表)。有人可以帮忙吗？到目前为止我尝试的是。

const SubSubComponent = props => {
  let dropdown = () => {
    if (props.openDropDownFlag) {
      return (
        <ul style={{ listStyle: 'none', border: '1px     solid #000' }}>
          <li>User data </li>
          <li>Edit</li>
        </ul>
      );
    }
  };

  return (
    <div>
      <span onClick={props.clickHandler}>
        {props.name}
      </span>
      <div>
        {dropdown}
      </div>
    </div>
  );
};

const SubComponent = props => {
  let returnVal = props.list.length
    ? props.list.map((item, index) => {
        return (
          <SubSubComponent
            key={index}
            name={item}
            openDropDownFlag={props.openDropDownFlag}
            clickHandler={props.openDropDown}
          />
        );
      })
    : null;

  return (
    <div>
      {returnVal}
    </div>
  );
};

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      arrayList: ['Matt', 'Maxx', 'Newton'],
      openDropDownFlag: false,
    };
    this.openDropDown = this.openDropDown.bind(this);
  }
  openDropDown = () => {
    //code to show dropdown
    debugger;
    this.setState({
      openDropDownFlag: true,
    });
  };
  render() {
    return (
      <div>
        <SubComponent
          list={this.state.arrayList}
          openDropDown={this.openDropDown}
          openDropDownFlag={this.state.openDropDownFlag}
        />
      </div>
    );
  }
}
render(<Main />, document.getElementById('root'));

我在 Code Sandbox 中尝试了同样的方法

Answer 1

使用您的沙箱，我制作了一个不涉及子组件的简化版本，每次单击跨度时，它都会更新状态以在跨度下方设置打开的下拉列表，并且因为它只跟踪一个值 '打开'列表，已经打开的列表消失。

这里的沙盒:https://codesandbox.io/s/BLwl1y6j2

import React from 'react';
import { render } from 'react-dom';


class Main extends React.Component {

  constructor() {
    super();
    this.state = {
      arrayList: ['Matt', 'Maxx', 'Newton'],
      open: null
    };
  }

  openList = () => {
    return (
      <ul style={{ listStyle: 'none', border: '1px solid #000' }}>
        <li>User data </li>
        <li>Edit</li>
      </ul>
    );
  }

  openDropDown = (event) => {
    console.log(event.target.innerText);
    this.setState({
      open: event.target.innerText,
    });
  }

  render() {
    return (
      <div>
        {
          this.state.arrayList.map((name, index) => {
            return (<div key={`${name}-${index}`}>
            <span onClick={ this.openDropDown }>
              { name }
            </span>
              { name === this.state.open ? this.openList() : null }
          </div>);
          })
        }
      </div>
    );
  }
}
render(<Main />, document.getElementById('root'));

我以前写过这样的组件，根据我的经验，下拉列表实际上并不是一件容易的事。我有一个选择列表下拉列表，当其他下拉列表位于它附近时，它需要保持一致的行为，这样当单击下拉列表时，展开的下拉 ListView 将展开并 float 在其他 UI 元素上。同样，当它展开时，它必须防止点击我附近的其他下拉列表组件，并且当我点击屏幕上的其他任何地方时，它必须恢复到非下拉模式。此外，它还必须处理单击以选择展开列表本身上的项目。

要实现这些行为，需要对具有不同 z 索引的不可见绝对和相对定位的 div 元素进行一些分层，以收集 onClick 事件并对 UI 中的不同点击操作使用react。总的来说，这是一组相当复杂的交互。