Отображать только следующий незаполненный компонент формы в React - PullRequest
Новая
       5

Отображать только следующий незаполненный компонент формы в React

1 голос
/ 18 марта 2019

Мне тяжело со сложной формой. Есть около 400 вопросов, большинство из которых на радио. Я думаю, что это то место, куда нужно идти с useMemo, или createRef, useRef или чем-то еще, так что только этот первый пустой компонент получает результат true для отображения стиля.

Пожалуйста, помогите мне.

Вот основное сходство с источником 

const SeveralForms = () => {
  return(
    // hope pseudo code is ok
    // like 10 of these
    <Form>
  )
}

const Form = () => {
  return(
    // about 30 of these
    <RadioGroup>
  )
}

const RadioGroup = () => {

  const show = () => (pesky logic i cant pin down)

  return(
    <div style={{display: show() ? 'block' : 'none' }}>
      <RadioButton />
      <RadioButton />
      <RadioButton />
    </div>
  )
}

1 Ответ

0 голосов
/ 18 марта 2019

Почему бы просто: 

const RadioGroup = () => {
  const [isAnswered, setIsAnswered] = useState(false);

  const onClick = () => {
     // check if either of your radio buttons are checked
     // and set the state accordingly
     setIsAnswered(true /*or false*/)
  }

  return(
    <div style={{display: isAnswered ? 'none' : 'block' }} onClick={onClick}>
      <RadioButton />
      <RadioButton />
      <RadioButton />
    </div>
  )
}
...