React 네이티브는 입력 포커스가있는 동안 뷰의 일부를 조건부로 렌더링합니다.

Question

다음과 같은 경우가 있습니다.

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

이 실제로 잘 작동하지만 난 경고를 얻을 :

를 MyComponent가 렌더링 내부 findNodeHandle에 액세스합니다. 은 순수한 함수 여야합니다.

텍스트 블록을 조건부로 렌더링하고이 경고를 피하는 방법은 무엇입니까? 당신은 렌더링() 메소드에서 심판을 참조 할 수 없습니다

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 1

당신은 구성 요소의 상태를 사용할 수 있습니다. Read more about the cautions of working with refs here.

아래 이미지에서 볼 수 있듯이 구성 요소를 처음 탑재 할 때 refs는 정의되지 않습니다. 텍스트 (구성 요소를 다시 렌더링하는 상태를 변경 함)를 사용할 수있게되었습니다.

최적해

상태를 사용하는 것이다. 솔루션을 게시하려고했지만 Freez는 이미 그랬습니다. 그러나, 나는 여전히 이것을 게시하고 있기 때문에 왜 refs 대신에 state를 사용해야하는지 알 수있다.

Answer 2

: