オプション用に4つのラジオボタンと1つの入力ボックスを作成しました：その他のラジオボタン（スクリーンショットを参照）。他のラジオボタンをチェックして入力ボックスに値を入力すると、入力ボックスに入力されたテキストと同じにthis.state.genderなります。したがって、他のラジオボタンがチェックされている場合にのみ、それ以外の場合はラジオボタンのオプション値と等しい場合にのみ実行したいと思います。-1this.state.gendertextthis.state.gender = this.state.gendertextthis.state.genderthis.state.gendertext = ''
注：-1は、最後のラジオボタンオプションの識別子として使用されます。
contactform.js：
import React, { Component } from 'react';
class ContactForm extends Component {
constructor(props){
super(props);
this.state = {
gender:'',
gendertext:''
};
}
setGender(checkedValue){
console.log(checkedValue);
this.setState({
gender:checkedValue
})
}
onChangeTextBoxGender(event){
this.setState({gendertext: event.target.value})
}
savedata(age, gender, health, name, email, info, fitness){
let newcontent = contentref.push();
if(this.state.gender === -1){
this.setState({
gender:this.state.gendertext
})
}
newcontent.set({
gender:this.state.gender,
gendertext:this.state.gendertext
});
}
render() {
return (
<div>
<div id="center">
<form>
<div id="gender">
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<h4>What is your gender?</h4>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<div className="radio">
<label><input type="radio" name="gender" checked={(this.state.gender === 'Female')} onChange={this.setGender.bind(this,'Female')}/> Female</label>
</div>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<div className="radio">
<label><input type="radio" name="gender" checked={(this.state.gender === 'Male')} onChange={this.setGender.bind(this,'Male')}/> Male</label>
</div>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<div className="radio">
<label><input type="radio" name="gender" checked={(this.state.gender === 'Prefer not to say')} onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label>
</div>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<div className="radio">
<label><input type="radio" name="gender" checked={(this.state.gender === -1)} onChange={this.setGender.bind(this,-1)}/>Other</label>
<input type="text" class="form-inline" id="other1" value={this.state.gendertext} onChange={this.onChangeTextBoxGender.bind(this)}/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
);
}
}
export default ContactForm;
スクリーンショット：ここ
onChangeTextBoxGender(event){
const txt=event.target.value;
this.setState({
gendertext: txt,
gender: txt
})
}
そして、
setGender(checkedValue){
console.log(checkedValue);
this.setState({
gender:checkedValue,
gendertext:''
})
}
そして、次の行を変更します。
<label><input type="radio" name="gender" checked={(this.state.gender === -1 || this.state.gendertext.length >0)} onChange={this.setGender.bind(this,-1)}/>Other</label>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加