[英]How to retrieve value in input checkbox (Using Reactjs)
I know this is duplicate question to other, however I have problem pertaining why their is no value output in my console. 我知道这是对其他人的重复问题,但是我有一个问题,为什么它们在我的控制台中没有输出值。
My Goal: I want to get the value of checkbox. 我的目标:我想获取复选框的价值。
I have here my codes. 我有我的密码。
State: 州:
employ_status:''
Constructor: 构造函数:
this.handle_employ_status = this.handle_employ_relocate.bind(this);
Handle: 处理:
handle_employ_status(e){
console.log(e.target.checked, e.target.name);
}
JSX: JSX:
<div className="form-check-inline disabled">
<label className="form-check-label">
<input
type="checkbox"
className="form-check-input"
name="employmentstatus"
onChange={this.handle_employ_status}
defaultChecked={false}
value="Self-Employed"/>Self-Employed
</label>
</div>
<div className="form-check-inline disabled">
<label className="form-check-label">
<input
type="checkbox"
className="form-check-input"
name="employmentstatus"
onChange={this.handle_employ_status}
defaultChecked={false}
value="Student"/>Student
</label>
</div>
Console: 安慰:
console.log(this.state.employ_status);
In your constructor 在您的构造函数中
this.handle_employ_status = this.handle_employ_relocate.bind(this);
should be replace with 应该替换为
this.handle_employ_status = this.handle_employ_status.bind(this);
You're binding this
to wrong handler: 您
this
绑定到错误的处理程序:
this.handle_employ_status = this.handle_employ_relocate.bind(this);
Should be: 应该:
this.handle_employ_status = this.handle_employ_status.bind(this);
You no need to do binding in constructor if you use arrow function 如果使用箭头功能,则无需在构造函数中进行绑定
handle_employ_status = e => {
console.log(e.target.checked, e.target.name);
}
Also to handle checkbox values you can do something like below 另外,要处理复选框值,您可以执行以下操作
constructor(){
this.state = {
empChecked: false,
stuChecked: true
}
}
handle_employ_status = e = {
if(e.target.value == "Self-Employed"){
this.setState({
empChecked: !this.state.empChecked
});
}
if(e.target.value == "Student"){
this.setState({
stuChecked: !this.state.stuChecked
});
}
console.log(e.target.checked, e.target.name);
}
<div className="form-check-inline disabled">
<label className="form-check-label">
<input
type="checkbox"
className="form-check-input"
name="employmentstatus"
onChange={this.handle_employ_status}
defaultChecked={false}
checked={this.state.empChecked}
value="Self-Employed"/>Self-Employed
</label>
</div>
<div className="form-check-inline disabled">
<label className="form-check-label">
<input
type="checkbox"
className="form-check-input"
name="employmentstatus"
onChange={this.handle_employ_status}
defaultChecked={false}
checked={this.state.stuChecked}
value="Student"/>Student
</label>
</div>
These are some issues in your code: 这些是您的代码中的一些问题:
this.handle_employ_status = this.handle_employ_relocate.bind(this);
In this code, where is handle_employ_relocate
function?. handle_employ_relocate
函数在哪里? handle_employ_relocate
you need change your handle function.. handle_employ_status(e){ //should be named by "handle_employ_relocate" console.log(e.target.checked, e.target.name); }
handle_employ_relocate
函数,则需要更改句柄函数handle_employ_status(e){ //should be named by "handle_employ_relocate" console.log(e.target.checked, e.target.name); }
handle_employ_status(e){ //should be named by "handle_employ_relocate" console.log(e.target.checked, e.target.name); }
.jsx
file, if you Control
your component, you should remove UnControl
property: defaultChecked={false} //this line should be convert to checked={this.state.employ_status}
.jsx
文件中,如果您Control
组件,则应删除UnControl
属性: defaultChecked={false} //this line should be convert to checked={this.state.employ_status}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.