2
votes

Comment changer la valeur d'un TextInput en utilisant une référence dans React Native?

J'utilise React Native 0.57.8 et React 16.7.0 . Je crée un clavier à l'écran pour Android TV qui sera utilisé comme bibliothèque. J'ai un TextInput auquel j'ai attribué une référence. Comment puis-je utiliser cette référence pour changer la valeur de TextInput?

<Button
  text="change value"
  onPress={() => {
    this.props.emailRef.current.props.value =
      this.props.emailRef.current.props.value + "q";
  }}
/>

Dans la bibliothèque:

constructor(props) {
  super(props);
  this.emailRef = React.createRef();
}

<TextInput
  ref={this.emailRef}
  placeHolder="Email Address"
  blurOnSubmit={false}
/>

<Keyboard textInput={this.emailRef} />

javascript reactjs react-native

9 commentaires

Y a-t-il une raison pour laquelle vous n'utilisez pas state pour les valeurs? Par exemple: value = {this.state.value} dans votre TextInput

@JRK Oui, je crée un clavier à l'écran pour Android TV qui sera utilisé comme bibliothèque.

Alors pourquoi ne pouvez-vous pas utiliser l'état?

TextInput et Button sont-ils dans le même composant?

@markmoxx Le clavier dans son ensemble est importé en tant que composant. La valeur sera mise à jour dans le onPress de chacun des boutons de la bibliothèque. L'état de l'écran ne peut pas être mis à jour à partir de là.

@markmoxx Non, ils ne font pas partie du même composant.

Votre TextInput est-il vraiment une entrée de texte, c'est-à-dire pouvez-vous y taper directement, ou est-il simplement contrôlé par les boutons? En d'autres termes, a-t-il vraiment besoin d'être un TextInput?

@markmoxx C'est un RN TextInput. Il est sur Android TV, il est donc flou et non modifiable, c'est pourquoi un clavier à l'écran est nécessaire pour changer sa valeur.

@khateeb vérifier ma réponse mise à jour

3 Réponses :

2
votes

Je pense que vous avez besoin d'une entrée contrôlée. Voici comment je procéderais:

constructor(props) {
  super(props);
  this.emailRef = React.createRef(); // might not need this
  this.state = {
    value: ''
  }
}

<TextInput
  value={this.state.value}
  onChangeText={(text) => this.setState({text})}
  placeHolder="Email Address"
  blurOnSubmit={false}
/>

<Button
  text="change value"
  onPress={() => {
    // just use `this.state.value` to do whatever you need with it
  }}
/>

0 commentaires

1
votes

Vous ne pouvez pas modifier un accessoire directement dans le composant - Les accessoires ne peuvent être dérivés que d'un composant parent, mais ne peuvent pas être modifiés, vous ne pouvez donc pas faire:

this.props.emailRef.current .props.value = this.props.emailRef.current.props.value + "q";

De plus, vous faites référence à this.props.emailRef dans votre bibliothèque, alors que le clavier n'a pas le prop emailRef - il a le prop textInput .

Essayez ceci:

<Button
  text="change value"
  onClick={() => {
    this.props.onInput(this.props.textInput.current.props.value + "q");
  }}
/>

À l'intérieur de la bibliothèque:

constructor(props) {
  super(props);
  this.emailRef = React.createRef();
  this.state = {
    value: "Initial Input"
  };
  this.handleInput = this.handleInput.bind(this);
}

handleInput(input) {
  this.setState({ value: input });
}

render() {
  return (
    ...
      <Keyboard textInput={this.emailRef} onInput={this.handleInput} />
      <TextInput ref={this.emailRef} value={this.state.value} />
    ...
  );
}

1 commentaires

'value' est une propriété en lecture seule. Utilisez la fonction setNativeProps

1
votes

Définir le texte dans la méthode d'état puis mettre à jour l'état dans le bouton enfoncé

puis définir le texte comme celui-ci

<Text>
       {this.state.myText}
    </Text>

0 commentaires