web-dev-qa-db-fra.com

Comment obtenir des valeurs de types d'entrées en utilisant this.refs dans reactjs?

Impossible d'obtenir les valeurs du type d'entrée avec this.refs ... Comment obtenir ces valeurs à partir du 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>
        )
      }
    }
javascriptreactjs
15
Anthony Winzlet

Vous devriez éviter ref="googleInput" car il est maintenant considéré comme hérité. Vous devriez plutôt déclarer

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

À l'intérieur de votre gestionnaire, vous pouvez utiliser this.googleInput pour référencer l'élément.

Ensuite, dans votre fonction submitForm, vous pouvez obtenir la valeur de texte avec this.googleInput._getText()

Les références de chaîne sont héritéeshttps://facebook.github.io/react/docs/refs-and-the-dom.html

Si vous avez déjà travaillé avec React auparavant, vous connaissez peut-être une ancienne API dans laquelle l'attribut ref est une chaîne, comme "textInput", et le nœud DOM est accessible en tant que this.refs.textInput. Nous vous le déconseillons car les références de chaîne présentent des problèmes, sont considérées comme héritées et risquent d'être supprimées dans l'une des prochaines versions. Si vous utilisez actuellement this.refs.textInput pour accéder aux références, nous vous recommandons le modèle de rappel.

15
Dan
getValue: function() {
    return this.refs.googleInput.value;
  }
8
Johib Khan

utiliser ref={ inputRef => this.input = inputRef } est maintenant considéré comme un héritage. Dans React 16.3 et après, 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

6
mohitSehgal

Je pense que la méthode la plus idiomatique consiste à utiliser state au lieu de refs, bien que ce 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 .

4
adrice727

J'ai essayé la réponse ci-dessus ( https://stackoverflow.com/a/52269988/1978448 ) et j'ai constaté que cela ne fonctionnait que pour moi lorsque je mettais les arbitres dans l'état, mais pas lorsque je leur conférais des propriétés composant.

Constructeur:

this.state.refs={
  fieldName1: React.createRef(),
  fieldName2: React.createRef()
};

et dans mon handleSubmit je crée un objet payload à poster sur mon serveur comme ceci:

var payload = {
  fieldName1: this.state.refs.fieldName1.current.value,
  fieldName2: this.state.refs.fieldName2.current.value,
}
1
NULL pointer

Le document de réaction l'explique très bien: https://reactjs.org/docs/refs-and-the-dom.html

ceci est considéré comme un héritage:

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

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

alors 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}
  />
};
1
bjoern

En 2018, vous devriez écrire dans le constructeur ce qui suit: Dans le constructeur de la classe, vous devriez ajouter quelque chose comme this.input = React.createRef()

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

1
yestema