React Native TextInput ref 导致奇怪的崩溃/锁定

Posted 2023-04-18

【中文标题】React Native TextInput ref 导致奇怪的崩溃/锁定

【英文标题】：React Native TextInput ref causes weird crash /lockup

【发布时间】：2018-02-02 09:45:29

【问题描述】：

我正在尝试在 React Native 中做一些 TextInput 焦点的事情，需要参考 TextInput 的 ref 属性...但是一旦我尝试控制台，就会出现一些奇怪的行为（运行 Expo XDE） .log 输入参考，整个事情变慢，好像有一些奇怪的内存循环。代码如下。

export default class MyComponent extends React.Component 
  constructor() 
    super();
    this.setInputRef = this.setInputRef.bind(this);
  
  // function where i want to set or access the input ref
  setInputRef(input) 
    console.log('This log message is fine');
    console.log('This log message is not fine:', input); // locks up here
  

  render() 
    return (
      <View>
            <TextInput ref=input => this.setInputRef(input) />
      </View>
    );
  

有什么想法吗？不确定这是否是本机反应问题。基本上我正在尝试调用在我的setInputRef 函数期间传入和调用的另一个函数，以便父组件可以知道这个文本输入的引用

【问题讨论】：

您是否尝试过将 ref 存储在变量中，而不是在每次 ref 更改时触发函数？

这行得通 - 但同样的问题，如果我在那个元素上有一个调用 focus() 的按钮......在我做焦点之前，尝试控制持有 ref 的变量，它锁定了。

【参考方案1】：

你不需要使用 ref 来做到这一点，你可以使用这段代码来做你想做的事：

export default class MyComponent extends React.Component 
  state = text: ''

  _setValue = (text) => this.setState(text)

  render () 
    return (
      <View>
        <TextInput
          autoFocus=true
          onChangeText=this._setValue
          value=this.state.text
        />
      </View>
    )
  

在这种情况下，您的 TextInput 值存储在 this.state.text 中。这个组件通过使用autoFocus=true将输入集中在componentDidMount上。

【讨论】：

我不认为这是他想要做的。他提到了一些关于focus 的东西，而不是存储或访问输入值。

我更新了我的代码，这个组件将输入集中在componentDidMount。

是的，基本上我有一个父组件，它有两个子组件：一个是包含“回复”按钮的评论，另一个是“键入评论”组件。 Child A 的回复按钮需要在 Child B 的输入字段上触发focus()。

FWIW 我想通了。它与这个答案有关：***.com/a/42017890/3842828

基本上你需要在 Parent 中引用的 Child B 组件上设置一个ref。然后你基本上打电话this.childBRef.inputFieldRef.focus();

【参考方案2】：

我仍然不知道为什么当我尝试控制台记录该字段的 ref 时系统“锁定”...但是我确实解决了我的问题，实际上是 得到 ref我需要。所以不确定这个问题本身是否“解决”了，但我确实学到了一些东西。

【讨论】：

这太奇怪了！我很高兴不只是我。也使用世博会。