React本机TextInput引用导致奇怪的崩溃/lockup

Question

我正在尝试在React Native中做一些TextInput focus的事情，并且需要引用TextInput的ref属性……但是出现了一些奇怪的行为(运行Expo XDE)，当我尝试console.log输入ref时，整个过程变慢了，就好像有一些奇怪的内存循环一样。下面的代码。

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

有什么想法吗？不确定这是否是react原生问题。基本上，我尝试调用在setInputRef函数过程中传入和调用的另一个函数，以便父组件可以知道此文本输入的ref

Answer 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上。

Answer 2

我仍然不知道为什么每当我试图通过控制台登录字段的ref时，系统都会“锁定”……然而，我确实解决了我的问题，实际上就是得到了我需要的裁判。所以我不确定这个问题本身是否得到了“解决”，但我确实学到了一些东西。