javascript - 复选框不显示选中

Question

我正在使用复选框输入。当我点击复选框时，复选框不显示选中但我仍然得到复选框的值。我使用 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>
        );
    }

}

如何显示选中的复选框？

Answer 1

this.state.productStatus 是一个 bool 值，所以你的条件总是给你 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} 
/>