为什么我的应用无法处理窗体的单选按钮选择值?



我是ReactJS的新手,如果这听起来不对劲,很抱歉。我正在尝试创建一个包含多单选按钮字段的表单用户。当填写表单然后提交时,文档存储在数据库中,但类型字段为空。这就是我被困的地方。

class SignupForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
prenom: '',
password: '',
type:String
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

}
handleInputChange(event) {
const target = event.target;
const inputName = target.name;        
const inputValue = target.value;
this.setState({
[inputName] : inputValue
});        
}
handleSubmit(event) {
event.preventDefault();   
const signUpRequest = Object.assign({}, this.state);
signup(signUpRequest)
.then(response => {
Alert.success("Votre inscrption est réussi. Veuillez s'authentifier pour continuer!");
this.props.history.push("/login");
}).catch(error => {
Alert.error((error && error.message) || 'Oops! Il y a un erreur de saisi . Veuiller saisir une autre fois!');            
});
}
//
<label><input type="radio" value="medecin" name="type" value={this.state.type} onChange={this.handleInputChange} required/>Médecin</label><br/>
<label id="aaa"><input type="radio" value="Patient"  name="type" value={this.state.type} onChange={this.handleInputChange} required/>Patient</label><br/>
<label id="aa"><input type="radio" value="Laboratoire" name="type" value={this.state.type} onChange={this.handleInputChange} required/>Laboratoire</label><br/>
<label id='a'><input type="radio" value="pharmacie"  name="type" value={this.state.type} onChange={this.handleInputChange} required/>Pharmacie</label><br/>

存储在数据库中的文档示例:

{
"_id":{"$oid":"607012c3c500325c3ec18bb7"},
"name":"racha",
"prenom":"qdqsd",
"email":"qds@sfd.c",
"emailVerified":false,
"password":"$2a$10$5aK8yJIQ40lbPP.vfGWoNeVnXiyHOIIVpa2yyXRKL8eyMmgCRWO8C",
"provider":"local",
"type":"",
"_class":"com.example.springsocial.model.User"
}

我将此函数添加到SignUpForm类

setType(event) {
this.state.type=event.target.value;
}

以及下面的onChange函数:

<div id="om" className="form-item" onChange={this.setType.bind(this)}>
<p>Vous êtes ?</p>
<label><input type="radio" value="medecin" name="type" />Médecin</label><br/>
<label id="aaa"><input type="radio" value="Patient"  name="type" />Patient</label><br/>
<label id="aa"><input type="radio" value="Laboratoire" name="type" />Laboratoire</label><br/>
<label id='a'><input type="radio" value="pharmacie"  name="type" />Pharmacie</label><br/>
</div>
<div className="form-item">
<button type="submit" className="btn btn-block btn-primary" >S'inscrire</button>
</div>

问题解决了:(

最新更新