Отслеживание состояния радиовхода React - PullRequest
Новая
       8

Отслеживание состояния радиовхода React

0 голосов
/ 26 октября 2018

Вот мой компонент Radiobutton: 

export default class Radiobutton extends PureComponent {
  render() {
    const { answer, value } = this.props;
    return (
      <div className="form">
        <div className="form__answer">
          <FormGroup check>
            <Label check>
              <Input type="radio" name="radio" value={value} />
              {answer}
              <span className="checkmark" />
            </Label>
          </FormGroup>
        </div>
      </div>
    );
  }
}

И компонент, в котором я его использую: 

class RadiobuttonQuestion extends PureComponent {
  render() {
    const { title, question, answers } = this.props.question;
    return (
      <div>
        <Question title={title} question={question} />
        <Form>
          {answers.map(answer => (
            <Radiobutton key={answer._id} answer={answer.value} />
          ))}
          <SubmitButton />
        </Form>
      </div>
    );
  }
}

Я пытаюсь отследить состояние вопроса и ответов, чтобы отправить данные о том, какой вариант был выбран пользователем.

Я пробовал разные варианты, но в целом для меня не совсем ясно, должен ли я установить состояние для Radiobutton или для RadiobuttonQuestion?Кажется более логичным сделать это в Вопросе, потому что, когда я попробовал это в кнопке, так как я сделал событие onClick, состояние менялось не в зависимости от того, какой переключатель был выбран, 3 кнопки не знают друг о другена данный момент.

Так что, если бы я мог сделать console.log о выбранном, это было бы начало.

1 Ответ

0 голосов
/ 26 октября 2018

Надеюсь, это поможет

RadioButton 

const RadioButton = ({ answer, value, name }) => (
  <label>
    <input 
      type="radio" 
      name={name} 
      value={value}
    />
    {answer}
  </label>
)

RadioGroup 

const RadioButtonAnswers = ({answers, chooseAnswer, name}) => (
  <div onChange={chooseAnswer}>
   { answers.map(props => ( 
     <RadioButton key={props.value} {...props} name={name} />)
   )}
  </div> 
)

Вопрос 

class Question extends React.Component {
    state = {
    answer: ""
  }

  chooseAnswer = e => this.setState({answer: e.target.value});

  render() {
    return (
        <div className="question">
          <h2>{this.props.question} --> {this.state.answer || "Not Answered"}</h2>
        <RadioButtonAnswers 
          {...this.props}
          chooseAnswer={this.chooseAnswer}
        />
        </div>
    )
  }
}

App 

class App extends React.Component {
    state = {
    questions: [
    {
      "name": "q1",
      "question": "A dog goes?",
      "answers": [
        {value: "woof", answer: "Woof!"},
        {value: "meow", answer: "Meoooowwwwwww!"},
        {value: "quack", answer: "Quack! Quack!"}
            ]
    },
        {
      "name": "q2",
      "question": "A Cat goes?",
      "answers": [
        {value: "meow", answer: "Meoooowwwwwww!"},
        {value: "tweet", answer: "Tweet! Tweet!"},
        {value: "moo", answer: "MOOOOOOOO!"}
            ]
    }]
  }

  render() {
    return (
      <div>
        <h2>Questions:</h2>
        <div>
          {this.state.questions.map((item, index) => (
            <Question 
              key={index} 
              {...item}
             />
          ))}
        </div>
      </div>
    )
  }
}

Дом переплет 

ReactDOM.render(<App />, document.querySelector("#app"))

HTML 

<div id="app"></div>
...