Question

我正在与问答组一起进行琐事游戏（因此问题1有4个选择，依此类推）。我试图让答案选择首先显示为单选按钮，然后使用React-Select（https://github.com/JedWatson/react-select）。

使用单选按钮时，我得到8个空白单选按钮。使用“选择”时，我得到了8个答案组，但没有文字。我只知道，因为我一直在点击以查看会发生什么。

我怀疑我没有正确进入数组和/或未正确绑定某些东西，但是到目前为止，我的搜索没有产生结果。问题的文本正确显示，因此我不会在下面粘贴。我将广播和Select都包括在内，以试图了解哪种广播最有效。

回购：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（这是我尝试的单选按钮答案。我仅包括8个答案组中的3个以节省空间）

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（这是React-Select尝试。）

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;

Answer 1

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

反应多选答案组

1 个答案: