reactjs - 使用 Bootstrap 和 react，我如何才能获得我正在寻找的这些功能？

Question

大家好，我对如何在我的网站上获得以下功能感到有些困惑。本质上，我需要一个下拉菜单，显示下拉菜单的子部分。子部分必须是可点击的，并且必须有一个勾号将其标记为完成。例如，如果我单击慈善目的，它会将我带到一个文本字段。

对于我可以使用哪些确切组件来完成此任务，我将不胜感激。我决定学习反应，所以我对它很陌生。再次感谢。

标签： reactjstwitter-bootstrapcomponentsdropdownstyling

Answer 1

你的陈述不是 100% 清楚的，所以我假设你想要一些下拉菜单，其中的项目有复选框来指示它们的值。由于您使用的是 Bootstrap，我将发布一个使用 React-Bootstrap 库的示例，该库已为 React 准备好 Bootstrap 组件。

首先，您将拥有某种状态来保存所有选定的值：

state = {
    purposeOfCharity: false,
    privateBenefit: true,
    achievableYearPlan: true,
    resourcesAvailable: false
}

当您有状态或任何其他信息源时（因为您是初学者，请坚持使用类组件的状态），您可以相应地呈现选中/未选中的 CheckBox。

这是 React-Bootstrap 库的链接：https ://react-bootstrap.github.io/

以下是每个下拉菜单的代码：

<Dropdown>
    <Dropdown.Toggle>
        Advancing Charitable Purpose
    </Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item>
            <Fragment>
                <Form.Check type="checkbox" checked={this.state.purposeOfCharity}
                    onClick={() => this.setState({purposeOfCharity: !this.state.purposeOfCharity})
                />
                <span>Purpose of Charity</span>
            </Fragment>
        </Dropdown.Item>
        <Dropdown.Item>
            <Fragment>
                <Form.Check type="checkbox" checked={this.state.privateBenefit}
                    onClick={() => this.setState({privateBenefit: !this.state.privateBenefit})
                />
                <span>Private Benefit</span>
            </Fragment>
        </Dropdown.Item>
        <Dropdown.Item>
            <Fragment>
                <Form.Check type="checkbox" checked={this.state.achievableYearPlan}
                    onClick={() => this.setState({achievableYearPlan: !this.state.achievableYearPlan})
                />
                <span>Achievable Year Plan</span>
            </Fragment>
        </Dropdown.Item>
        <Dropdown.Item>
            <Fragment>
                <Form.Check type="checkbox" checked={this.state.resourcesAvailable}
                    onClick={() => this.setState({resourcesAvailable: !this.state.resourcesAvailable})
                />
                <span>Resources Available</span>
            </Fragment>
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

如果Form.Check不工作，试试这个：

<input type="checkbox" checked={this.state.resourcesAvailable}
    onClick={() => this.setState({resourcesAvailable: !this.state.resourcesAvailable})
/>

当然，你可以对普通的 HTML 组件做同样的事情，并className为你的组件设置相应的引导程序。如果您希望文本具有特定样式，则必须为每个范围内的跨度Dropdown.Item提供引导。classNameBootstrap 没有任何Typography组件，就像Material-UI和其他库一样。