Question

我有一个初学者问题，我有两个并排的列表，第一个列表中的每个项目在第二个列表中都有自己的项目，我的意思是当我在第一个列表中选择一个项目时，它应该显示我的列表/项目在第二个清单中与它相关。物品是静态的。我怎样才能做到这一点？使用DOM属性来显示或隐藏其他项目是否合适？

<ul className="privilegesList">
    <li>Groups</li>
    <li>Reports</li>
    <li>Supports</li>
</ul>

<ul className="privilegesList subLists">
    <li><Checkbox label="Mobile Device Management"/></li>
    <li><Checkbox label="Drive and Docs"/></li>
    <li><Checkbox label="G-Mail"/></li>
</ul>

Answer 1

“做出反应的方式”是保持组件的状态，选择了privilegesList项。

您可以将onClick函数添加到可单击元素，并让这些函数更改组件的状态

您的渲染应该以该州财产为条件。有关条件渲染的更多信息，请查看文档中的此页面：https://reactjs.org/docs/conditional-rendering.html

例如：

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedPrivileges: "groups"
        }
    }

    renderSubList() {
        switch (this.state.selectedPrivileges) {
            case "groups":
                return (
                    <ul className="privilegesList subLists">
                        <li><Checkbox label="Mobile Device Management" /></li>
                        <li><Checkbox label="Drive and Docs" /></li>
                        <li><Checkbox label="G-Mail" /></li>
                    </ul>
                )
            case "reports":
                return (
                    <ul className="privilegesList subLists">
                        <li><Checkbox label="A" /></li>
                        <li><Checkbox label="B" /></li>
                        <li><Checkbox label="C" /></li>
                    </ul>
                )
            case "supports":
                return (
                    <ul className="privilegesList subLists">
                        <li><Checkbox label="K" /></li>
                        <li><Checkbox label="L" /></li>
                        <li><Checkbox label="G" /></li>
                    </ul>
                )
            default:
                return (
                    <ul className="privilegesList subLists">
                        <li><Checkbox label="X" /></li>
                        <li><Checkbox label="Y" /></li>
                        <li><Checkbox label="Z" /></li>
                    </ul>
                )
        }

    }

    render() {
        return (
            <div>
                <ul className="privilegesList">
                    <li onClick={() => this.setState({ selectedPrivileges: "groups" })}>Groups</li>
                    <li onClick={() => this.setState({ selectedPrivileges: "reports" })} > Reports</li>
                    <li onClick={() => this.setState({ selectedPrivileges: "supports" })} > Supports</li>
                </ul>
                {this.renderSubList()}
            </div>

        )
    }
}

Answer 2

考虑到这些值很可能来自服务器，我会实现以下内容：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      currentMain: undefined,
      main: [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }],
      subs: [
        { id: 1, name: "Sub Item 1 of Item 2", parentId: 2 },
        { id: 2, name: "Sub Item 2 of Item 2", parentId: 2 },
        { id: 3, name: "Sub Item 1 of Item 1", parentId: 1 }
      ]
    };
  }

  handleMainClick(id, event) {
    this.setState({ currentMain: id });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.main.map(item => (
            <li
              key={item.id}
              onClick={this.handleMainClick.bind(this, item.id)}
            >
              {item.name}
            </li>
          ))}
        </ul>
        <ul>
          {this.state.subs
            .filter(item => item.parentId === this.state.currentMain)
            .map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </div>
    );
  }
}

https://codesandbox.io/s/42xv6jj0mw

解释：＆＃34; main＆＃34;来自该州的集合被呈现为第一个列表。点击任何项目后，此项目的ID将以 currentMain 状态保存。由于更新状态将导致重新渲染，因此您可以根据当前选定的主项目过滤第二个项目列表（this.state.subs）。

当然，一切都取决于数据的格式。

如何在React JS中显示列表项复选框列表？

2 个答案: