Как получить значение по радио selectButton в React

Question

Привет, у меня есть этот метод рендеринга

return(
  <Form.Group className={'d-flex  justify-content-start'}>
      <Form.Label className={'mb-0 mr-2'}><b>Pohlavie:</b></Form.Label>
      <Form.Check
          type="radio"
          label="Muž"
          name="formHorizontalRadios"
          id="formHorizontalRadios1"
          className={'mr-2'}
      />
      <Form.Check
          type="radio"
          label="Žena"
          name="formHorizontalRadios"
          id="formHorizontalRadios2"
      />
  </Form.Group>
)

Я использую компонент React bootstrap Form.Check для радио типа. Теперь от parrent я получаю объект через реквизиты с атрибутом user.gender (1 или 0), как я могу связать этот радиовыбор с атрибутом пола через состояние или что-то еще? Например, когда я выбираю девушку, мне нужно изменить user.gender на 1, а также я должен сделать один из этих radioselects установленным по умолчанию, если значение user.gender не равно нулю ... Как я могу это сделать, пожалуйста?

Answer 1

Вам нужно прикрепить onChange радиокнопок к обратному вызову, который изменит ваше состояние:

const { useState } = React,
      { render } = ReactDOM,
      { Form } = ReactBootstrap,
      rootNode = document.getElementById('root')

const App = () => {
  const [gender, setGender] = useState()
  return (
  <Form.Group className={'d-flex  justify-content-start'}>
      <Form.Label className={'mb-0 mr-2'}><b>Pohlavie:</b>{gender && `(${gender})`}</Form.Label>
      <Form.Check
        type="radio"
        label="Muž"
        name="formHorizontalRadios"
        id="formHorizontalRadios1"
        className={'mr-2'}
        onChange={() => setGender('male')}
        />
      <Form.Check
        type="radio"
        label="Žena"
        name="formHorizontalRadios"
        id="formHorizontalRadios2"
        onChange={() => setGender('female')}
       />
</Form.Group>
  )
  
}

render (
  <App />,
  rootNode
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>