如何使用 React Native 中的引用更改 TextInput 的值

Question

我正在使用 React Native 0.57.8 和 React 16.7.0 。我正在为Android TV创建一个屏幕键盘，它将用作库。我有一个TextInput，我已为其分配了参考。如何使用此引用更改TextInput的value？

constructor(props) {
  super(props);
  this.emailRef = React.createRef();
}
<TextInput
  ref={this.emailRef}
  placeHolder="Email Address"
  blurOnSubmit={false}
/>
<Keyboard textInput={this.emailRef} />

图书馆内：

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

Answer 1

使用状态 他们都说不知道为什么我完全需要在不使用状态的情况下更新 UI。在我的情况下，文本输入使用的是状态，当键入速度非常快时，异步状态和 UI 更新滞后于键入速度，光标滞后于几个字母，导致键入错误。防止这种情况的唯一方法是不使用任何状态！如果不使用 state，则无法在不将其设置为只读的情况下为文本输入提供初始值。为了给 TextInput 一个初始值，我们可以在组件挂载事件时使用 ref 并以编程方式设置本机 props。这样：

const setInitialBio = React.useCallback(() => {
    if(inputRef.current) {
        inputRef.current.setNativeProps({ text: "initial value goes here" })
    }
}, []);

Answer 2

我认为

你需要的是一个受控的输入。以下是我将如何做到这一点：

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
  }}
/>

Answer 3

在状态方法中设置文本，然后在按下按钮中更新状态

然后像这样设置文本

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

Answer 4

您不能直接在组件中更改 prop - props 只能从父组件派生，但不能修改，因此您不能执行以下操作：

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

此外，您在库中引用this.props.emailRef，而键盘没有emailRef道具 - 它具有textInput道具。

试试这个：

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} />
    ...
  );
}

图书馆内：

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