J'ai une forme qui utilise l'état actuel des champs d'entrée pour afficher des valeurs à la page après sa soumission.
Le problème est que je ne veux pas que ces champs soient accessibles après la soumission. P>
J'ai déjà essayé de désactiver le formulaire après avoir soumis, mais cela ne suffit pas. L'utilisateur peut simplement appuyer sur Soumettre à nouveau et que les champs seront à nouveau accessibles. P>
export default class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
disabled: false,
submitted: false
};
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
handleFreezeClick = e => {
this.setState({ disabled: !this.state.disabled });
};
handleSubmit = e => {
const {
firstname,
lastname,
disabled,
submitted
} = this.state;
this.setState({ submitted: true });
e.preventDefault();
};
render() {
const {
firstname,
lastname,
disabled,
submitted
} = this.state;
return (
<section className="section">
<div className="container">
<div className="content">
<h1>Form</h1>
<form
name="formtest"
method="post"
action="www.google.com/"
disabled={this.state.disabled}
onSubmit={this.handleSubmit}
>
<div className="field">
<label className="label" htmlFor="firstname">
First Name
</label>
<div className="control">
<input
className="input"
type="text"
name="firstname"
value={this.state.firstname}
onChange={this.handleChange}
defaultValue="Doctor"
disabled={this.state.disabled}
required={true}
/>
</div>
</div>
<div className="field">
<label className="label" htmlFor="lastname">
Last Name
</label>
<div className="control">
<input
className="input"
type="text"
name="lastname"
value={this.state.lastname}
onChange={this.handleChange}
defaultValue="Tenma"
disabled={this.state.disabled}
required={true}
/>
</div>
</div>
<div className="field">
<button
onClick={this.handleFreezeClick.bind(this)}
className="btn"
type="submit"
>
Submit
</button>
</div>
</form>
</div>
</div>
</section>
<section>
<div className="container">
<div className="content">
{submitted ? (
<p>{`Hello ${firstname} ${lastname}`}</p>
) : null}
</div>
</div>
</section>
3 Réponses :
Vous devez désactiver le bouton Soumettre code> aussi. <button
onClick={this.handleFreezeClick}
className="btn"
type="submit"
disabled={submitted} // add it in your code
>
Submit
</button>
Bien que ma question initiale ait peut-être posé quelque chose d'apparemment impossible, cela a résolu mon problème. Merci. Maintenant, est-il même possible d'effacer les entrées et de garder l'état de cette entrée?
Pour cela, vous devez utiliser une variable différente pour le but d'affichage.
Merci, disons que j'ai un autre bouton qui efface les valeurs d'entrée. J'ai une fonction de main-photo qui ressemble à ce `` `` `handleclear = e => {this.setstate ({prénom: '', lastname: '',}); }; `` `Le bouton efface avec succès les valeurs d'entrée, mais une fois que les champs sont effacés, ils restent verrouillés car ils ont déjà été désactivés par le bouton Soumettre déjà. Comment puis-je déverrouiller ces champs? Merci!
Certains où vous devez fournir le bouton pour l'activer.
Désolé, je n'avais pas de place pour entrer le code du bouton, mais cela existe.
Le problème est que tous les champs restent désactivés une fois la soumission initiale. - Toutes mes excuses si cela nécessite que je crée un fil supplémentaire pour obtenir une réponse.
Si vous créez du fil, il sera bon de comprendre l'exigence avec des codes d'échantillonnage.
Je pense que vous pouvez changer votre poignée de poignée d'une manière et étiquette de bouton aussi
J'ai apporté peu de modifications dans votre code Snippet-
1) Ajoutez des propres de la fullname dans cette.state.
2) Dans la fonction PermetxUBMIT Lorsque vous définissez l'état de la soumission de bouton, également défini. L'état de la pleine name, le prénom et le nom de nom comme ci-dessous Cela vous effacera les champs de saisie et nous stockons également des valeurs d'entrée au nom du champ FULNAMNAME. 3) Changez votre reliure dans. Au lieu de relier le prénom et le nom de famille la lient avec une propriété FULLNAME. Comme ci-dessous {soumis? (
{
): null} espère que cela résoudra votre problème. Hello $ {this.state.fulname} }
Y a-t-il une raison pour laquelle vous ne voulez pas désactiver le bouton au lieu des champs de saisie?
De plus, vous n'avez pas besoin de lier votre méthode manipulation dans la touche rappel depuis que vous définissez une fonction de flèche.
Il n'y a pas de vraie raison. Ma décision initiale était de désactiver mais @Clue Mediator a résolu mon problème. Je ne sais pas si j'en aurai jamais besoin, mais ma demande d'origine est-elle même possible? Merci.
Si vous souhaitez conserver ces valeurs (à des fins) et effacez les entrées, je pense que vous pouvez les enregistrer à une autre valeur d'état et effacer l'état d'origine qui conserve les valeurs d'entrée peut-être. Votre intention réelle est importante ici.
Compris, très apprécié.