Реагировать на группы с несколькими вариантами ответов - PullRequest
Новая
       32

Реагировать на группы с несколькими вариантами ответов

0 голосов
/ 07 декабря 2018

Я работаю над викториной с группами ответов (поэтому у вопроса 1 есть 4 варианта и т. Д.).Я попытался сначала выбрать варианты ответа в виде переключателей, а затем с помощью React-Select (https://github.com/JedWatson/react-select).

. При использовании переключателей я получаю 8 пустых переключателей. При использовании Select, Iполучить 8 групп ответов, но текст отсутствует. Я знаю только потому, что щелкаю, чтобы увидеть, что происходит.

Я подозреваю, что неправильно вхожу в массивы и / или неправильно связываю что-то, номои поиски до сих пор не дали результатов. Текст к вопросам отображается правильно, поэтому я не буду вставлять его ниже. Я включил и радио, и попытки Выбрать, чтобы понять, какой из них работает лучше всего.

Репо: https://github.com/irene-rojas/pixar-react. Советы с благодарностью.

App.js 

import React, { Component } from 'react';
import './App.css';
import Timer from "./Timer";
import Questions from "./Questions/Questions.js";

class App extends Component {

  render() {
    return (

    <div className="parallax">

    <div className="App">

    <div className="wrapper">


      <div className="header">
        <h1>Pixar Trivia!</h1>
      </div>

        <Timer />   

        <div className="questionSection">
          <Questions />
        </div>

        </div>

      </div>

      </div>
    );
  }
}

export default App;

Radio.js (это моя попытка ответов на радио кнопки. Я включаю только 3из 8 групп ответов для экономии места) 

import React, { Component } from 'react';

class Radio extends Component {

  state = {
    answerChoices: [
        {answers1: [
            {
                label: "2001: A Space Odyssey",
                value: false
            },
            {
                label: "The Shining",
                value: true
            },
            {
                label: "One Flew Over the Cuckoo's Nest",
                value: false
            },
            {
                label: "The Godfather",
                value: false
            }
        ]},
    {answers2: [
            {
                label: "Luxo Ball",
                value: false
            },
            { 
                label: "Luxo",
                value: false
            },
            {
                label: "Luxo, Jr.",
                value: true
            },
            {
                label: "Tinny",
                value: false
            }
--------- skip to a 2 option group ------
        {answers7: [
            {
                label: "Boo",
                value: false
            },
            { 
                label: "Kitty",
                value: true
            }
            ]},
        ]
  };

  handleOptionChange = (event) => {
    event.preventDefault();
    console.log("clicked");
    // checked={true}
  };

  render() {
    return (

      <div className="radio">

        <form>
            {this.state.answerChoices.map(answer => {
            return (
                <input 
                    type="radio" 
                    key={answer.id}
                    value={answer.value} 
                    defaultChecked={false}
                    onClick={this.handleOptionChange} 
                />
                )
            })}
        </form>

      </div>

    );
  }
}

export default Radio;

answers.js (это попытка выбора ответа). 

import React, { Component } from "react";
import Select from "react-select";

const answerChoices = [

{answers1: [
    {
        label: "2001: A Space Odyssey",
        value: false
    },
    {
        label: "The Shining",
        value: true
    },
    {
        label: "One Flew Over the Cuckoo's Nest",
        value: false
    },
    {
        label: "The Godfather",
        value: false
    }
]},
{answers2: [
        {
            label: "Luxo Ball",
            value: false
        },
        { 
            label: "Luxo",
            value: false
        },
        {
            label: "Luxo, Jr.",
            value: true
        },
        {
            label: "Tinny",
            value: false
        }
]},
----------- skip to 2 option group ------
{answers7: [
    {
        label: "Boo",
        value: false
    },
    { 
        label: "Kitty",
        value: true
    }
]},
]

  class Answers extends Component {

    state = {
      selectedOption: null,
    }

handleChange = (selectedOption) => {
  this.setState({ selectedOption });
  console.log(`Option selected:`, selectedOption);
}

render() {
  const { selectedOption } = this.state;

  return (

        <Select
          value={selectedOption}
          onChange={this.handleChange}
          options={answerChoices}
        />
      );
    }
  }

  export default Answers;

1 Ответ

0 голосов
/ 07 декабря 2018

answerChoices - это массив объектов, которые также являются массивами, что означает, что вам нужно выполнить итерацию 2 раза, чтобы получить доступ к параметрам ответа каждого ответа. 

{this.state.answerChoices.map(answerOptions => {
        return answerOptions.map(option => (
           <input 
                type="radio" 
                key={option.id}
                value={option.value} 
                defaultChecked={false}
                onClick={this.handleOptionChange} 
            />
        ));
  }
...