当输入被聚焦时，React Native有条件地呈现视图的一部分

Question

我有以下情况。

function MyComponent() {
  return (
    <View>
      <TextInput ref={ref => (this.input = ref)} style={styles.input} />
      {this.input.isFocused() && <Text>Hello World</Text>}
    </View>
  );
}

这实际上工作正常，但我收到警告：

  

MyComponent正在其渲染中访问findNodeHandle。给予   应该是一个纯粹的功能。

如何有条件地渲染文本块并避免此警告？

Answer 1

您可以使用组件状态：

class MyComponent extends React.Component {

   state = { isFocused: false }

   handleInputFocus = () => this.setState({ isFocused: true })

   handleInputBlur = () => this.setState({ isFocused: false })

   render() {
      const { isFocused } = this.state

      return (
        <View>
          <TextInput 
            onFocus={this.handleInputFocus} 
            onBlur={this.handleInputBlur} 
          />
          {isFocused && <Text>Hello World</Text>}
        </View>
      )
   }
}

Answer 2

您无法从render（）方法引用引用。 Read more about the cautions of working with refs here.

如下图所示，第一次组件安装时，refs未定义，当我更改文本时（更改状态，重新呈现组件）refs现在可用。

最佳解决方案是使用状态。我打算发布解决方案，但Freez已经做到了。但是，我仍然发布这个，所以你知道为什么你应该使用state而不是refs。