这是我的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记录,那将是一个开始。
答案 0 :(得分:0)
希望这会有所帮助
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>