我正在使用复选框输入。当我单击checbox时,checkbox不会显示为已选中,但我仍然会得到checkbox的值。我使用React JS
import React from 'react';
import callApi from './../../utils/apiCaller'
import { Link } from 'react-router-dom'
class ProductActionPage extends React.Component {
constructor(props) {
super(props);
this.state = {
id: '',
productStatus: ''
}
}
onChange = (e) => {
var target = e.target;
var name = target.name;
var value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[name]: value
});
}
render() {
var statusCheckbox = this.state.productStatus === 'true' ? true : false;
return (
<div className="row">
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div className="form-group">
<label>Trang thai: </label>
</div>
<div className="checkbox">
<label>
<input type="checkbox" checked={statusCheckbox} name="productStatus" onChange={this.onChange} />
Con hang
</label>
</div>
<button type="submit" className="btn btn-primary">Luu lai</button>
<Link to="/product/list" className="btn btn-danger ml-5">Huy bo</Link>
</div>
</div>
);
}
}
如何显示已选中的复选框?
答案 0 :(得分:3)
this.state.productStatus
是一个布尔值,因此您的条件将始终为您提供false
,因为您正在比较Boolean === String
。
只需更改
var statusCheckbox = this.state.productStatus === 'true' ? true : false;
到
var statusCheckbox = this.state.productStatus ? true : false; //It doesn't make any sense
或者简单地
var statusCheckbox = this.state.productStatus;
或者您可以直接使用this.state.productStatus
<input
type="checkbox"
checked={this.state.productStatus}
name="productStatus"
onChange={this.onChange}
/>