復選框不顯示為已選中

Question

我正在使用復選框輸入。 當我單擊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>
        );
    }

}

如何顯示已選中的復選框？

Answer 1

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} 
/>