Comment obtenir des valeurs de types d'entrée à l'aide de ce.refs dans reactjs?

Pas en mesure d'obtenir les valeurs du type d'entrée à l'aide de ce.refs...
comment obtenir que des valeurs de type d'entrée

   export class BusinessDetailsForm extends Component {
      submitForm(data) {
        console.log(this.refs.googleInput.value)
        }
      }
      reder() {
        return(
          <form onSubmit={this.submitForm}>
            <Field type="text"
              name="location"
              component={GoogleAutoComplete}
              id="addressSearchBoxField"
              ref="googleInput"
            />
          </form>
        )
      }
    }

OriginalL'auteur Anthony Winzlet | 2017-03-31

javascript reactjs

17

Vous devriez éviter de ref="googleInput" comme il est maintenant considéré comme héritage. Vous devez déclarer
```
ref={(googleInput) => { this.googleInput = googleInput }}
```
À l'intérieur de votre gestionnaire, vous pouvez utiliser this.googleInput de référence de l'élément.

Puis à l'intérieur de votre submitForm fonction, vous pouvez obtenir la valeur de texte avec
this.googleInput._getText()

Chaîne refs sont hérités
https://facebook.github.io/react/docs/refs-and-the-dom.html

Si vous avez travaillé avec de Réagir avant, vous pourriez être familier avec une ancienne API où l'attribut ref est une chaîne de caractères, comme "textInput", et le nœud DOM est accessible que celui-ci.réf.textInput. Nous vous déconseillons ce type car les refs ont des problèmes, sont considérés comme un héritage, et sont susceptibles d'être retirés dans une des prochaines versions. Si vous êtes actuellement en utilisant ce.réf.textInput à l'accès aux références, nous vous recommandons le rappel du motif à la place.

Modifier

De Réagir 16.3, le format pour la création de refs sont:
```
class Component extends React.Component 
{
        constructor() 
        {
            this.googleInput = React.createRef();
        }

        render() 
        {
            return 
            (
                <div ref={this.googleInput}>
                    {/* Details */}
                </div>
            );
        }
    }
```
Veuillez considérer downvoting si vous vous sentez cette réponse ne contribue pas à la question. L'OP a demandé comment utiliser ref pour obtenir la valeur d'un champ de saisie, cette réponse fournit une solution afin de satisfaire que.
Cela ne fonctionne pas. J'obtiens un message d'erreur indiquant que Uncaught TypeError: _this.googleInput._getText is not a function

OriginalL'auteur Dan

à l'aide de ref={ inputRef => this.input = inputRef } est considéré comme legs. Dans Réagissent 16.3 au-delà, vous pouvez utiliser le code ci-dessous,

class MyForm extends React.Component {
    constructor(props) {
        //...
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

EDIT: merci pour le commentaire @stormwild

Ok merci je vais vérifier
De réagir.createRef a été introduit dans de Réagir 16.3. Si vous utilisez une version antérieure de Réagir de rappel refs est recommandé. reactjs.org/docs/refs-and-the-dom.html

OriginalL'auteur mohitSehgal

getValue: function() {
    return this.refs.googleInput.value;
  }

^^^^ cela fonctionne

OriginalL'auteur Johib Khan

Je pense que le plus idiomatique façon est d'utiliser des state au lieu de refs, bien qu'il soit un peu plus de code dans ce cas, puisque vous n'avez qu'une seule entrée.

export class BusinessDetailsForm extends Component {

  constructor(props) {
    super(props);
    this.state = { googleInput: '' };
    this.defaultValue = 'someValue';
    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleChange(e) {
    const { field, value } = e.target;
    this.setState({ [field]: value });
  }
  submitForm() {
    console.log(this.state.googleInput);
  }
  render() {
    return (
      <Formsy.Form onSubmit={this.submitForm} id="form_validation">
        <Field type="text"
          name="googleInput"
          onChange={this.handleChange}
          component={GoogleAutoComplete}
          floatingLabelText="location"
          hintText="location"
          id="addressSearchBoxField"
          defaultValue={this.defaultValue}
          onSelectPlace={this.handlePlaceChanged}
          validate={[ required ]}
        />
      </Formsy.Form>
    );
  }
}

Voir https://facebook.github.io/react/docs/forms.html#controlled-components.

J'ai toujours préféré la handleChange méthode que vous utilisez ici. Je sais que c'est un vieux post, mais au cas où quelqu'un voit cette réponse est un peu plus "sucrés" syntaxe handleChange = ({ target: { name, value } }) => this.setState({ [ name ]: value });
En gardant un texte de saisie de la valeur dans state peut apporter toute une liste de re-rendu de maux de tête pour les composants enfants; l'aide d'un ref évite ce et est bien pratique.
Je ne suis pas sûr de ce que les maux de tête. Par la Réagir docs, "La norme à atteindre, c'est avec une technique dite “contrôlée des composants.”

OriginalL'auteur adrice727

1

En 2018, vous devez écrire dans le constructeur ceci:
Dans le constructeur de classe, vous devez ajouter quelque chose comme
this.input = React.createRef()

Exemples ici:
https://reactjs.org/docs/uncontrolled-components.html

OriginalL'auteur yestema
1

J'ai essayé la réponse ci-dessus (https://stackoverflow.com/a/52269988/1978448) et trouvé qu'il n'a travaillé que pour moi, quand j'ai mis les refs dans l'état, mais pas quand je viens de faire les propriétés du composant.

Constructeur:
```
this.state.refs={
  fieldName1: React.createRef(),
  fieldName2: React.createRef()
};
```
et dans mon handleSubmit-je créer une charge utile de l'objet à poster sur mon serveur comme ceci:
```
var payload = {
  fieldName1: this.state.refs.fieldName1.current.value,
  fieldName2: this.state.refs.fieldName2.current.value,
}
```
OriginalL'auteur NULL pointer

La réagir docu, l'explique très bien: https://reactjs.org/docs/refs-and-the-dom.html

ceci est considéré comme l'héritage:

yourHandleMethod() {
  this.googleInput.click();
};

yourRenderCode(){
  ref={(googleInput) => { this.googleInput = googleInput }}
};

considérant que, cela est considéré comme la voie à suivre:

constructor(props){
  this.googleInput = React.createRef();
};
yourHandleMethod() {
  this.googleInput.current.click();
};
yourRenderCode(){
  <yourHTMLElement
    ref={this.googleInput}
  />
};

OriginalL'auteur bjoern

1

À l'aide de RN 0.57.8 lorsqu'on l'a essayé this.googleInput._getText(), Il a entraîné une erreur _getText is not a function donc j'ai imprimé this.googleInput dans la console et a constaté que _getText() est une fonction à l'intérieur _root
1. this.googleInput._root._getText()
2. this.googleInput._root._lastNativeText - Ce sera le retour de la dernière etat qui n'est pas l'état actuel veuillez être prudent lors de son utilisation.
OriginalL'auteur Navneet kumar

Vous devez vous connecter pour publier un commentaire.