Используя Bootstrap и реагируйте, как именно я могу получить эти функции, которые я ищу? - PullRequest
Новая
       33

Используя Bootstrap и реагируйте, как именно я могу получить эти функции, которые я ищу?

0 голосов
/ 16 января 2020

Screenshot of what I am trying to accomplish

Привет всем, я немного озадачен тем, как я могу получить функциональность ниже на моем сайте. По сути, мне нужен раскрывающийся список, который показывает подразделы раскрывающегося списка. Подраздел должен быть кликабельным, и должна быть галочка, чтобы пометить его как завершенный. Например, если бы я щелкнул по цели благотворительности, это привело бы меня к текстовому полю.

Я был бы очень признателен за любую помощь в том, какие именно компоненты я мог бы использовать для достижения sh этого. Я решил научиться реагировать, поэтому я очень новичок в этом. Еще раз спасибо.

1 Ответ

0 голосов
/ 16 января 2020

Ваше утверждение не является на 100% ясным, поэтому я предполагаю, что вам нужны выпадающие меню, в которых элементы имеют флажки для указания их значения. Поскольку вы используете Bootstrap, я опубликую пример с использованием библиотеки React- Bootstrap, в которой есть готовые Bootstrap компоненты для React.

Во-первых, у вас будет какое-то состояние для сохраните все выбранные значения: 

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 компонентами и установить bootstrap * 1020. * с вашими компонентами. Интервал внутри каждого Dropdown.Item должен иметь Bootstrap className, если вы хотите, чтобы текст имел определенный стиль c. Bootstrap не имеет компонентов Typography, как Material-UI и других библиотек.

...