javascript - 当输入聚焦时，React Native 有条件地渲染部分 View

Question

我有以下场景。

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

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

MyComponent is accessing findNodeHandle inside its render. render should be a pure function.

如何有条件地呈现文本 block 并避免此警告？

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