javascript - React Native conditionally render part of view while input is focused - Stack Overflow

admin管理员组

文章数量:1317906

I have the following scenario.

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

This actually works fine, but I get the warning:

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

How do I conditionally render The text block and avoid this warning?

I have the following scenario.

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

This actually works fine, but I get the warning:

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

How do I conditionally render The text block and avoid this warning?

• javascript
• reactjs
• react-native
• purely-functional

Share Improve this question Follow asked Feb 25, 2017 at 18:22 Steven ScaffidiSteven Scaffidi 2,30711 gold badge1414 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use ponent state :

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

You cannot reference refs from the render() method. Read more about the cautions of working with refs here.

As you can see in the image below, the first time the ponent mounts, refs is undefined, when I change the text (Which changes the State, which re-renders the ponent) refs is now available.

An optimal solution would be using state. I was going to post a solution but Freez already did. However, I am still posting this so you know why you should be using state instead of refs.

本文标签： javascriptReact Native conditionally render part of view while input is focusedStack Overflow