如何修复复选框错误

Question

每当我尝试单击页面上的复选框时，它都不会选中实际的框。我知道这是我的 ReactJS 中的错误，但我不知道我做错了什么。你能帮忙吗？

我尝试在堆栈和其他网站上研究答案，但一无所获。

class Description extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
    }
    render() {
        return (
            <form>
                <label>
                    <input
                        name="Checking Account"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Checking Account &nbsp;
                </label>
                <label>
                    <input
                        name="Savings Account"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Savings Account &nbsp;
                </label>
                <label>
                    <input
                        name="CDs/Money Market Accounts"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        CDs/Money Market Accounts &nbsp;
                </label>
                <br />
                <label>
                    <input
                        name="Student Banking"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Student Banking &nbsp;
                </label>
                <label>
                    <input
                        name="Auto Loans"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Auto Loans &nbsp;
                </label>
                <label>
                    <input
                        name="Home Equity"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Home Equity &nbsp;
                </label>
                <br />
                <label>
                    <input
                        name="Mortgage"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Mortgage &nbsp;
                </label>
                <label>
                    <input
                        name="Student Loans"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Student Loans &nbsp;
                </label>
                <label>
                    <input
                        name="Saving for Retirement"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Saving for Retirement &nbsp;
                </label>
                <br />
                <label>
                    <input
                        name="Investment Account"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Investment Account &nbsp;
                </label>
                <label>
                    <input
                        name="Credit Card"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Credit Card &nbsp;
                </label>
                <label>
                    <input
                        name="Other"
                        type="checkbox"
                        checked={this.state.checked}
                        onChange={this.handleInputChange} />
                        Other &nbsp;
                </label>
            </form>
        );
    }
}
ReactDOM.render(
    <Description/>,
    document.getElementById('checkbox')
);

我希望程序能够在最后选中该框！

Answer 1

以下是学生银行业务的一个例子

将学生银行更名为学生银行将 this.state.checked 更改为 this.state.studentBanking

改变

   <input
                    name="Student Banking"
                    type="checkbox"
                    checked={this.state.checked}
                    onChange={this.handleInputChange} />

自

    <input
                    name="studentBanking"
                    type="checkbox"
                    checked={this.state.studentBanking}
                    onChange={this.handleInputChange} />

对其他输入复选框也执行相同的操作

Answer 2

您需要

在onChange事件中使用setState设置checked状态值。

 handleInputChange(event) {
            const target = event.target;
            const value = target.type === 'checkbox' ? target.checked : target.value;
            const name = target.name;
            this.setState({
                checked: value
            });
        }

Answer 3

这是因为您在单击信用卡时将状态设置为{ "Credit Card": true }。您可以做的是相应地设置值。我有一个使用您的代码本身的简单演示。

Answer 4

您正在正确设置状态，但由于检查的绑定方式，检查不起作用。

请更改

checked={this.state.checked}

自

checked={this.state.StudentBanking} 

另外，删除名称中的空格

<input
   name="CheckingAccount"
   type="checkbox"
   checked={this.state.CheckingAccount}
   onChange={this.handleInputChange} />