使用 React.createRef() 从 InputText 获取值

Question

我没有在“”更改时重新呈现整个组件树，而是尝试在我的 Class 组件中使用 refs。（我将 React Native 与 Expo 管理的工作流一起使用。）

使用 refs，键入的文本将按原样显示在 InputText 字段中。但是，当按下按钮时，键入文本的值（InputText 的值）应该被控制台记录下来，但事实并非如此。

export class Feed extends Component {
constructor(props){    
  super(props);
  this.state = {
    //some state variables
  }
  this.myTextFromInput = React.createRef()
}

我首先创建了 myTextFromInput 引用（上图）。

<TextInput 
style={{height:100}}  
ref={this.alias} 
placeholder="Input Text Here"
/>

然后我在 InputText 组件中使用了 myTextFromInput 引用。最后，按钮！

<Button onPress={()=>console.log(this.myTextFromInput.current.value)}>Press me!</Button>

这给了我 undefined。我也试过 this.myTextFromInput.value 和一个过时的 .getText() 方法。

如何获取输入的文字？

更新：终端日志 undefined。但是零食效果很好！？

Answer 1

您没有传递对 TextInput 的正确引用，它应该是 this.myTextFromInput 而不是 this.alias，请看一下：

export class Feed extends Component {
  constructor(props){    
    super(props);
    this.state = {
      //some state variables
    }
    this.myTextFromInput = React.createRef()
    // bind the method to the component instance
    this.logInputText = this.logInputText.bind(this)
  }
 
  logInputText() {
    console.log(this.myTextFromInput.current.value)
  }
  
  render() {
    return (
      <View>
        <TextInput 
          style={{height:100}}
          // pass the correct reference here  
          ref={this.myTextFromInput} 
          placeholder="Input Text Here"
        />
        <Button 
         onPress={this.logInputText}>
         Press me! 
        </Button>
      </View>
    )
  }
}

另外不要忘记，无论您使用方法而不是箭头函数，都必须将它绑定到 class 实例，就像我所做的那样。请参阅 React 文档中的 and this example。

更新： React.ref 在 Android 和 iOS 上的工作方式似乎与在网络上的工作方式不同，您无法从输入中获取值，因为该组件不提供此属性，执行 console.log(this.myTextFromInput.current) 您可以看到所有可用的属性。来自包 react-native-paper 的 is to use TextInput 的一种解决方案，因为它提供来自 ref 的输入值，或者您可以使用通用状态方法来存储输入价值，像这样：

export class Feed extends Component {
  constructor(props){    
    super(props);
    this.state = {
      myTextFromInput: ""
    }
    // bind the method to the component instance
    this.logInputText = this.logInputText.bind(this)
  }
 
  logInputText() {
    console.log(this.state.myTextFromInput)
  }
  
  render() {
    return (
      <View>
        <TextInput 
          style={{height:100}}
          // you don't need to use ref
          placeholder="Input Text Here"
          onChangeText={(text) => this.setState({myTextFromInput: text})}
        />
        <Button 
         onPress={this.logInputText}>
         Press me! 
        </Button>
      </View>
    )
  }
}

使用 React.createRef() 从 InputText 获取值

Obtain value from InputText using React.createRef()

javascript

refs

reactjs

react-native

react-ref