Question

这是我的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记录，那将是一个开始。

Answer 1

希望这会有所帮助

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

应用

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

Dom绑定

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

HTML

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

跟踪无线电输入状态React

1 个答案: