使用react.Createref（）从inputText获取值

Question

而不是每当“＆lt; inputText style {...}＆gt;”时重新渲染整个组件-tree。已更改，我试图在我的类组件中使用REF。 （我使用的是带有Expo托管工作流程的React Native。）

使用REFS，键入的文本在InputText字段中应出现。 但是，当按下按钮时，应记录键入文本的值（输入文本的值），但事实并非如此。

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

我首先创建MyTextFrominput Ref（上图）。

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

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

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

这给了我未定义的。我还尝试了this.mytextfrominput.value和一个.getText（）方法。

如何获得输入的文本？

更新： 终端日志未定义。但是零食很好！？

Answer 1

您没有将正确的引用传递给textInput，它应该是this.mytextfrominput not 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>
    )
  }
}

T忘了，无论您是否使用方法而不是箭头函数，都像我一样将其绑定到类实例。请参阅这个问题和此示例来自React Docs。

更新： react.ref在Android和iOS上似乎没有像在Web上工作的方式一样，您无法从输入中获得值组件不提供此属性，执行console.log（this.mytextfrominput.current）您可以看到所有可用属性。 One solution from this question is to use

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