使用Bootstrap并做出反应，我究竟如何才能获得想要的这些功能？

Question

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

我真的很感谢我可以使用哪些确切的组件来完成此工作。我决定学习反应，所以我对此很陌生。再次感谢。

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内部的跨度指定一个Bootstrap className。 Bootstrap没有任何Typography组件，例如Material-UI和其他库。