Я новичок в ReactJS и у меня простой вопрос ...

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

В основном у меня есть тестовая страница, здесь у меня есть раздел из одной уникальной подборки. Я хочу реализовать кнопку (в родительском элементе), чтобы помочь мне проверить, верны ли ответы или нет (все сразу).

Вот код:

https://mbv401920150.github.io/Math/code.js

Где настоящая страница:

https://mbv401920150.github.io/Math

Любые комментарии приветствуются!

2
MiBol 26 Сен 2018 в 05:17

2 ответа

Лучший ответ

Так что вы, возможно, думаете, что это намного сложнее, чем должно быть :)

Самый простой способ справиться с этим сценарием и, возможно, даже очистить ваш код (это было много, поэтому я просто просмотрел XD) - создать массив каждого вопроса и сохранить его отдельно в questionList.js или что-то в этом роде:

export const questions = [
    {
        key: "q1",
        answer: "a",
        options: {},
    }
}

Для каждого из этих вопросов вы сохраняете любую информацию, к которой вам нужен доступ (я не уверен, что вам нужно), варианты бесконечны.

Затем вы устанавливаете свое состояние в родительском компоненте:

this.state = {
    answers: []
}

Теперь это будет отслеживать ответы по мере того, как пользователь вводит их в каждый компонент.

Итак, теперь вы собрали все это действительно аккуратно, используя questionList, вы можете отобразить каждый вопрос, чтобы отобразить его, и использовать onChange для передачи значений обратно:

{questionList.map(question => {
        return (
            <Question 
                onChange={(e) => this.handleQuestionAnswered(question, e) 
                data={question}
            />
        )
    })    
}

Где this.handleQuestionAnswered() берет вопрос и ответ и обновляет состояние как таковое:

this.setState(prevState => {
    const newAnswers = prevState.answers;
    newAnswers[question.key] = e.target.value;
    return {
        answers: newAnswers,
    }
});

Затем, как только ваша проверка будет запущена, вы можете прокручивать ответы, используя ключи, и проверять каждый из них :)

Это может быть гораздо более длинное объяснение, но я надеюсь, что оно даст вам лучшее направление ... React - это поиск лучших способов сделать что-то проще: D

1
Tom Rowe 26 Сен 2018 в 02:39

Хорошая практика - не обращаться к дочерним компонентам, а запрашивать у них данные. Также хорошо иметь единый источник доверия, поскольку каждая часть ваших данных должна находиться в одном конкретном месте.

В вашем случае:

  1. Храните данные о проверенных параметрах в родительском компоненте (тот, который содержит кнопку отправки и проверяет ответы)
  2. Передайте обратный вызов дочерним компонентам, через которые они будут информировать родителя, если что-то изменилось.

Обратите внимание, что дочерние компоненты не должны содержать информацию о том, что было выбрано, вы должны передать эти данные из родительского компонента.

1
Martin Schulz 26 Сен 2018 в 02:36