Радио флажки проблема, не работают правильно? - PullRequest
0 голосов
/ 07 июля 2019

Я использую Semantic-ui-React library При попытке создать радио-флажки эти флажки должны быть обязательными. Как я могу сделать необходимые для радио кнопки? Есть ли способ сделать выпадающее меню в Semantic-ui-React?

import React, { Component } from 'react'
import { Divider,Label,List,Checkbox,Header } from 'semantic-ui-react'

handleRequest = (e, { value, label }) => {
  this.setState({ 
    redirect: false,
    requestCategory: value,
    typeOfRequest: label
  });
}

<Form.Field>
    <Form.Field>
      <Checkbox className = 'radio'
        required
        label="New Solution"
        name="typeOfRequest"
        value={false}
        checked={requestCategory === 'false'}
        onChange={this.handleRequest}
      />
    </Form.Field>
    <Form.Field>
      <Checkbox className = 'radio'
        required
        label="Enhancement to Existing Solution"
        name="typeOfRequest"
        value={'all'}
        checked={requestCategory === 'all'}
        onChange={this.handleRequest}
      />
    </Form.Field>
    <Form.Field>
      <Checkbox className = 'radio'
        required
        label="Production Support"
        name="typeOfRequest"
        value={'all'}
        checked={requestCategory === 'false'}
        onChange={this.handleRequest}
      />
    </Form.Field>
    <Form.Field>
      <Checkbox className = 'radio'
        required
        label="New Analysis"
        name="typeOfRequest"
        value={'all'}
        checked={requestCategory === 'all'}
        onChange={this.handleRequest}
      />
    </Form.Field>
    <Form.Field>
      <Checkbox className = 'radio'
       required
        label="Existing Analysis"
        name="typeOfRequest"
        value={'all'}
        checked={requestCategory === 'all'}
        onChange={this.handleRequest}
      />
    </Form.Field>
</Form.Field>

1 Ответ

0 голосов
/ 10 июля 2019

Чтобы сделать обязательным поле вашего флажка, вам просто нужно добавить реквизиты required в компонент <Form.Field>:

<Form.Field required>
  <Checkbox
    radio
    label="Existing Analysis"
    name="typeOfRequest"
    value={'all'}
    checked={requestCategory === 'all'}
    onChange={this.handleRequest}
  />
</Form.Field>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...