次のシナリオがあります。
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>
)
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加