web-dev-qa-db-fra.com

Mise à jour d'un React Champ de texte de saisie avec la valeur de l'événement onBlur

J'ai le champ de saisie suivant comme ci-dessous. En mode flou, la fonction appelle un service pour mettre à jour la valeur d'entrée sur le serveur. Une fois l'opération terminée, le champ d'entrée est mis à jour.

Comment puis-je le faire fonctionner? Je peux comprendre pourquoi cela ne me permet pas de changer de domaine, mais que puis-je faire pour que cela fonctionne?

Je ne peux pas utiliser le defaultValue parce que je changerai ces champs en d'autres

<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />

javascriptreactjsonblur
18
Suthan Bala

Afin de pouvoir éditer la valeur d'entrée, vous devez disposer d'un gestionnaire onChange qui met à jour la valeur. et puisque vous voulez appeler une fonction onBlur, vous devez lier cela comme onBlur={() => this.props.actions.updateInput()}

componentDidMount() {
   this.setState({inputValue: this.props.inputValue});
}
handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

<input value={this.state.inputValue} onChange={this.handlechange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} />
29
Shubham Khatri

Façons de faire ceci:

  1. Ne pas affecter la propriété value à input field, chaque fois que la méthode onblur obtient un déclencheur, appuyez sur l’API comme ceci:

    <input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />

Mettre à jour la valeur sur le serveur:

updateInput(value){
    /*update the value to server*/
}

  1. Si vous affectez la propriété value à input par this.props.inputValue, puis utilisez la méthode onChange, transmettez la valeur au composant parent, changez le inputValue en utilisant setState dans parent, cela fonctionnera comme suit:

    <input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />

Dans la composante parentale:

onChange(value){
    this.setState({inputvalue:value});
}

Mettre à jour la valeur sur le serveur:

updateInput(value){
    /*update the value to server*/
}
10
Mayank Shukla

Vous voudrez lier un événement onChange pour mettre à jour votre état. Veillez à utiliser la méthode bind dans votre constructeur afin de ne pas perdre le contexte "this" dans votre méthode de gestionnaire d'événements onChange. Vous voudrez alors renvoyer la valeur à votre méthode de saisie de mise à jour onBlur. Quelque chose comme ça:

constructor(props) {
  super(props);

  this.state = {
    inputValue: props.inputValue
  };
  this.handleChange = this.handleChange.bind(this);
};

handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

<input 
  value={this.state.inputValue}
  onChange={this.handleChange}
  onBlur={() => this.props.actions.updateInput(this.state.inputValue)} 
/>
5
MDiesel