【发布时间】：2016-11-07 22:31:10
【问题描述】：
我尝试按照此处的说明进行操作： http://react.tips/radio-buttons-in-reactjs/
这段代码几乎可以工作，但我似乎无法弄清楚哪里出了问题。使用两个单选选项，单击选定的单选按钮会将选择更改为另一个选项。单击未选中的收音机不会执行任何操作。我已经尝试了很多东西，但似乎没有什么能让收音机按预期工作。单击未选中的选项将其选中。
这是我的代码：（*已更新）
var RadioInput = React.createClass({
getInitialState: function () {
return {selectedOption: "0"};
},
handleOptionChange: function (changeEvent) {
this.setState({selectedOption: changeEvent.target.value});
console.log(this.state.selectedOption, changeEvent.target, this.props.inputValue);
},
render: function () {
var isChecked = this.state.selectedOption === this.props.inputValue;
return (<p><label>
<input type="radio" name={this.props.inputName} value={this.props.inputValue} checked={isChecked} onChange={this.handleOptionChange}/>{this.props.labelText}
</label></p>);
}
});
我希望有了这个通用的 RadioInput，我可以在其他组件中重用它，将一堆表单输入编译在一起......就像我在下面做的......
var MediaInfo = React.createClass({
render: function () {
return (
<div className="thumbnail">
<div className="caption text-center">
<h3>Media Contact Options</h3>
<form className="text-left">
<p>Please indicate your contact preferences for media inquiries below:</p>
<div className="form-group">
<div className="col-md-12">
{this.props.fields.options.map (function (data, i) {
return (<RadioInput key={i} inputName={data.inputName} labelText={data.labelText} inputValue={data.inputValue} />);
})}
</div>
</div>
{this.props.fields.fields.map (function (data, i) {
return (<TextInput key={i} inputName={data.inputName} labelText={data.labelText} placeholderText={data.placeholderText} inputValue={data.inputValue} />);
})}
</form>
</div>
</div>
)
}
});
var MemberInfo = React.createClass({
getInitialState: function () {
return {
contactInfo: [ {inputName:"fullName", labelText:"Display Name", placeholderText:"Enter Full Name", inputValue:"some name"},
{inputName:"phoneNumber", labelText:"Phone Number", placeholderText:"Enter Phone Number", inputValue:"001-555-1234"},
{inputName:"email", labelText:"Email", placeholderText:"Enter Email", inputValue:"mr.fake@someplace.com"},
{inputName:"address", labelText:"Address", placeholderText:"Enter Address", inputValue:"123 Main St. Podunk, FL"}
],
mediaContact: {fields: [ {inputName: "email", labelText: "Media Email", placeholderText:"Enter Medial Contact Email", inputValue:"get@me.dog"},
{inputName: "phone", labelText: "Media Phone", placeholderText:"Media Contact Phone Number", inputValue:"001-555-1234"},
],
options: [
{inputName: "mediaConsent", labelText: " Yes, I would like to be contacted by the Media.", inputValue:"1"},
{inputName: "mediaConsent", labelText: " No, I do not wish to be contacted by the Media.", inputValue:"0"}
]
}
}
},
render: function () {
return (
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">Manage Your Contact Info</h3> </div>
<div className="panel-body">
<div className="col-md-6">
<div className="row">
<div className="col-xs-12">
<ContactInfo fields={this.state.contactInfo} />
</div>
</div>
</div>
<div className="col-md-6">
<div className="row">
<div className="col-xs-12">
<MediaInfo fields={this.state.mediaContact} />
</div>
</div>
</div>
</div>
</div>
);
},
});
【问题讨论】：
-
你能举一个活生生的例子吗？展示你如何渲染它？
-
我更新了我的代码以显示
组件是如何在另一个组件中使用的。整个 组件呈现如下： ReactDOM.render( , document.querySelectorAll('#member-info')[0]);
标签： reactjs