Блог

Главная - Вопросы по программированию - Отрисовывает только следующий незаполненный компонент формы в React

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

#reactjs #react-hooks

#reactjs #реагирующие хуки

Вопрос:

У меня возникают трудности со сложной формой. Имеется около 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. Итак, вы хотите отображать только вопросы, на которые нет ответов?

2. да, но только по одному за раз, на первый, на который нет ответа, спасибо

3. В классе radiogroup у вас другой набор вопросов, и если на первый из них нет ответа, вы хотите показать всю эту группу?

4. каждый <RadioGroup> — это только 1 вопрос, и любой выбранный вариант является ответом, затем я хочу, чтобы отображалась последующая группа, и только по одному за раз, спасибо 🙂

Ответ №1:

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

 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>
  )
}

Комментарии:

1. Проблема в том, что я не знаю, как пометить вопросы, на которые нет ответов , чтобы отображался только первый из них. Возможно, мне придется установить счетчик на верхнем уровне. Тем не менее, спасибо. И вау, я почти никогда не получаю одобрения. Возможно, это псевдокод для быстрого чтения. 🙂