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

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

将学生银行名称更改为StudentBanking 将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

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

 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

您正在正确设置状态，但是由于绑定了已选中的方式，因此支票无法正常工作。

请更改

checked={this.state.checked}

到

checked={this.state.StudentBanking}

还要删除您姓名中的空格

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

Answer 4

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

如何修复Checkbox错误？

4 个答案: