1
votes

Réagir: stocker de manière permanente l'entrée utilisateur en tant que valeur

Actuellement, les entrées de l'utilisateur sont mises à jour par état et stockées en tant que valeur, mais chaque fois que l'utilisateur dirige vers une autre page, ferme la page ou la rafraîchit, la valeur disparaît. Je souhaite y stocker de manière permanente la valeur jusqu'à ce que l'utilisateur modifie son entrée. Aurais-je besoin d'utiliser un état persistant pour cela? Comment puis-je stocker de manière permanente la valeur de l'entrée utilisateur jusqu'à ce que l'utilisateur la modifie?

class Planning extends React.Component {
  constructor() {
    super()
    this.state = { 
      title: '',
      goal: '',
      tech: '',
      features: '',
     details: ''
       }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleChange(event) {

this.setState({ 
 [event.target.name]: event.target.value 
})
}

handleSubmit(event) {
  const {
    title,
     goal,
     tech,
     features,
    details
  } = this.state;
  event.preventDefault();
  this.setState({ title, goal, tech, features, details });
}

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
        <div>
          <label className="label-title">
            Project Title:</label>
            <input name="title" id="title" type="text" value={this.state.title} onChange={this.handleChange} required aria-required="true"/>
            </div>

reactjs

2 commentaires

Le stockage local fonctionnerait-il pour vous?

Cela devrait fonctionner pour lui ... Stockage local ou IndexedDB ou quelque chose de similaire

3 Réponses :

0
votes

Oui, vous devrez gérer cela avec une bibliothèque de gestion d'état. Le stockage local est trop extrême. De plus, la gestion de l'état sera utile pour d'autres éléments de votre application au fur et à mesure de sa croissance, je vous suggère donc de commencer correctement. Vous pouvez regarder mobx ou redux.

0 commentaires

1
votes

Changez votre fonction handleChange en:

constructor() {
    super()
    this.state = { 
      title: localStorage["title"],
      goal: '',
      tech: '',
      features: '',
     details: ''
       }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

et votre constructeur en:

handleChange(event) {
const { value, name } = event.target
localStorage[name] = value

this.setState({ 
 [name]: value
})
}

0 commentaires

0
votes

L'enregistrement dans localStorage est une opération synchrone, nous n'avons donc pas besoin de synchroniser l'état local avec localStorage chaque fois que la variable d'état change car React garde déjà la trace de l'état de l'application dans la session de l'utilisateur. Vous devez le conserver dans localStorage lorsque l'utilisateur quitte la page / s'actualise. Enregistrer dans localStorage sur les événements componentWillUnmount et window.onbeforeunload . Il existe un composant de stockage qui gère tout: https://github.com/ryanjyost/react- stockage simple

0 commentaires