Réagir - comment obtenir la valeur d’un champ de saisie ?

Question

J’ai le composant de réagir suivant :

La console me donne `` -toutes les idées quel est le problème avec ce code ?

Answer 1

Il y a deux réponses ici, selon la version de Réagir vous êtes (forcé) de travail(ing) avec:

Réagir 15 et ci-dessous

En faisant les choses correctement, comme par la Réagir la documentation et des tutoriels. Vous êtes en train de rédiger une INTERFACE utilisateur qui est rendu en fonction de deux choses:

1. les propriétés du composant tel que déclaré par n'importe quel parent crée une instance de ce composant, le parent peut modifier tout au long de son cycle de vie, et
2. les composants internes de l'état, qu'il peut modifier lui-même tout au long de son propre cycle de vie.

Ce que vous êtes pas en train de faire est de générer un élément d'entrée du nœud DOM et en tapant dedans. Vous êtes la génération d'une INTERFACE utilisateur qui doit montrer un manipulable chaîne de texte, et les manipulations de changer l'état du Composant, ce qui peut provoquer une rerender. L'etat est toujours l'autorité de dernière instance, de ne pas les DOM. Le DOM est une réflexion après coup, c'est juste l'INTERFACE utilisateur particulier du cadre vous arrive d'être en utilisant.

Donc, pour faire les choses correctement, votre composante a une valeur de l'état, qui est représenté par un champ de saisie, et nous pouvons le mettre à jour en faisant qu'élément de l'INTERFACE utilisateur d'envoyer des événements de changement de revenir dans le composant de:

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },

  updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

Vous tapez dans l'élément d'entrée, rien ne se passe à votre élément input encore, l'événement s'est intercepté et tué immédiatement, Réagir déclenche l' updateInputValue fonction de l'événement à la place. Cette fonction demande à Réagir pour mettre à jour l'état du composant, de sorte qu'il a la bonne valeur, et ensuite Réagir peut alors rerender votre INTERFACE utilisateur avec la nouvelle mise à jour, alors, seulement alors ne l'INTERFACE utilisateur montrer que vous avez tapé une lettre. Et tout cela se passe en quelques millisecondes, de sorte qu'il regarde comme vous avez tapé quelque chose de normalement, mais c'est absolument pas ce qui s'est passé.

addendum sur la base des observations

L'INTERFACE utilisateur entrées représentent les valeurs d'état (tenir compte de ce qui se passe si un utilisateur ferme l'onglet à mi-chemin, et l'onglet est restauré. Doit toutes ces valeurs, ils ont rempli en être restauré? Si oui, que de l'état). Qui pourrait vous faire sentir comme une grande forme dizaines, voire une centaine de formulaires d'entrée de données, mais de Réagir est sur la modélisation de l'INTERFACE utilisateur dans un maintenable: vous n'avez pas 100 indépendante des champs de saisie, vous avez des groupes d'entrées, de sorte que vous capturez chaque groupe dans un composant, puis construire votre "maître" de la forme comme un ensemble de groupes.

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

C'est aussi beaucoup plus facile à entretenir qu'un géant formulaire unique composant. Diviser les groupes en Composants à l'état d'entretien, où chaque composant est seul responsable pour le suivi de quelques champs de saisie à un moment.

Vous pouvez aussi l'impression que c'est "une corvée" pour écrire tout le code, mais c'est une fausse économie: les développeurs-qui-sont-pas-vous, y compris l'avenir vous fait bénéficier grandement de voir toutes ces entrées accroché explicitement, car il rend le code des chemins beaucoup plus facile à retracer. Cependant, vous pouvez toujours optimiser. Par exemple, vous pouvez écrire un etat de l'éditeur de liens

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",
      lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },
  componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },
  render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});

Bien sûr, il y a des versions améliorées de ce, afin de frapper https://npmjs.com et de recherche pour Réagir état reliant la solution qui vous convient le mieux. L'Open Source est la plupart du temps sur la recherche de ce que les autres ont déjà fait, et en l'utilisant, au lieu d'écrire vous-même tout à partir de zéro.

Réagir à 16 (et 15.5 de transition)

Que de Réagir à 16 (et de démarrage progressif avec 15,5) createClass appel n'est plus supporté, et la classe de la syntaxe doit être utilisé. Cette modification de deux choses: l'évidence de la classe de la syntaxe, mais aussi l' thiscontexte de liaison qu' createClass peut faire "libre", donc, pour vous assurer que les choses fonctionnent toujours assurez-vous que vous êtes à l'aide de la "graisse flèche" notation en this contexte de la préservation des fonctions anonymes en onWhatever des gestionnaires, tels que l' onChange nous utilisons dans le code ici:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      //...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

Answer 2

Réussi à obtenir la valeur du champ d’entrée en faisant quelque chose comme ceci :

Answer 3

React 16, j’utilise

Answer 4

J'ai réussi à faire cela en liant le "this" à la fonction updateInputValue (evt) avec

this.updateInputValue = this.updateInputValue.bind (this);

Cependant, la valeur d'entrée = {this.state.inputValue} ... ne s'est pas avérée être une bonne idée.

Voici le code complet dans babel ES6:

 class InputField extends React.Component{


  constructor(props){
   super(props);
   //this.state={inputfield: "no value"};   
   this.handleClick = this.handleClick.bind(this);
   this.updateInputValue = this.updateInputValue.bind(this);
  }

  handleClick(){
   console.log("trying to add picture url");
   console.log("value of input field : "+this.state.inputfield);

  }

  updateInputValue(evt){
    //console.log("input field updated with "+evt.target.value);
    this.state={inputfield: evt.target.value};   

  }

  render(){
    var r; 
    r=<div><input type="text" id="addpixinputfield" 
            onChange={this.updateInputValue} />
      <input type="button" value="add" id="addpix" onClick={this.handleClick}/>
      </div>;    
    return r;
   }
}
 

Answer 5

votre erreur est due à l'utilisation de la classe et lorsque vous utilisez la classe, nous devons lier les fonctions avec This afin de bien fonctionner. de toute façon, il y a beaucoup de tutoriels sur la raison pour laquelle nous devrions "ceci" et ce que "cela" fait en javascript.

si vous corrigez votre bouton d'envoi, cela devrait être un travail:

 <button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>
 

De plus, si vous souhaitez afficher la valeur de cette entrée dans la console, vous devez utiliser var title = this.title.value;