跟踪无线电输入状态 React答案

【问题标题】：Track radio input state React跟踪无线电输入状态 React
【发布时间】：2019-03-31 03:20:49
【问题描述】：

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

【问题讨论】：

标签： reactjs forms radio-button jsx

【解决方案1】：

希望对你有帮助

单选按钮

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

广播组

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>

【讨论】：