1
votes

Comment corriger le bug de Checkbox?

Chaque fois que j'essaye de cliquer sur la case à cocher sur la page, cela ne coche pas la case réelle. Je sais que c'est quelque chose qui ne va pas dans mon ReactJS mais je ne sais pas ce que je fais de mal. Pouvez-vous m'aider?

J'ai essayé de rechercher des réponses sur stack et sur d'autres sites Web, mais je n'ai rien trouvé.

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')
);

Je voudrais que le programme puisse cocher la case d'ici la fin!

javascript reactjs css

0 commentaires

4 Réponses :

0
votes

Voici un exemple pour Student Banking

Changez le nom de Student Banking en studentBanking Remplacez this.state.checked par this.state.studentBanking

Remplacez

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

par

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

Faites de même pour les autres cases à cocher d'entrée

2 commentaires

Cela a parfaitement fonctionné, je ne comprends pas pourquoi mais j'apprécie que la réponse a été très utile !!

Je vous en prie. En effet, vous utilisez dynamiquement setState pour la case sélectionnée en utilisant event.target.name. Le nom doit donc être studentBanking mais pas Student Banking.

0
votes

Vous devez définir la valeur d'état vérifié à l'aide de setState dans votre événement onChange .

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

            this.setState({
                checked: value
            });
        }

p >

1 commentaires

Cela a parfaitement fonctionné, je ne comprends pas pourquoi mais j'apprécie que la réponse a été très utile !!

0
votes

Vous définissez correctement l ' État , mais la vérification ne fonctionne pas en raison de la façon dont la cochée est liée.

veuillez modifier

XXX

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

également, supprimez l ' espace dans vos noms

checked={this.state.StudentBanking}

1 commentaires

Cela a parfaitement fonctionné, je ne comprends pas pourquoi mais j'apprécie que la réponse a été très utile !!

0
votes

En effet, vous définissez l'état comme {"Credit Card": true} lorsque vous cliquez sur Credit Card. Ce que vous pouvez faire, c'est simplement définir les valeurs en conséquence. J'ai une démo utilisant votre code lui-même.

0 commentaires