0
私はここの指示に従って試してみました： http://react.tips/radio-buttons-in-reactjs/reactJSで再利用可能なラジオボタンを作成するにはどうすればよいですか？
をこのコードはほぼ動作しますが、私が間違っているかを把握するように見えることはできません。 2つのラジオ・オプションをクリックすると、選択されたラジオ・ボタンが選択を他のオプションに変更します。選択されていないラジオをクリックすると何も起こりません。私はたくさんのことを試しましたが、ラジオを期待通りに動かすことはできません。選択されていないオプションをクリックすると選択されます。ここで
は私のコードです：（*更新）
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>);
}
});
私の希望は、この1つの汎用RadioInputで、私は、フォーム入力の束を一緒にコンパイルし、他のコンポーネント... I」と同様に、それを再利用することができるということです以下をしています....
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:"[email protected]"},
{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:"[email protected]"},
{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>
);
},
}）;
ライブサンプルを表示できますか？どのようにレンダリングするかを表示しますか？ – Li357