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

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

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

最佳答案

您无法直接在组件内更改道具-道具只能从父组件中派生，而不能修改，因此您不能这样做：

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

关于javascript - 如何使用React Native中的引用更改TextInput的值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54214114/