【React Native × Expo】TextInputでRefを使って別コンポーネントからメソッドを呼び出す
6793 ワード
今回はReact NativeのTextInputでのRefの書き方についてお伝えしていきたいと思います。
Refを使うことで、TextInputのメソッドを別のコンポーネントからの呼び出しが可能です。
※Refについてはこちらの公式ドキュメントを参照いただければと思います。
以下で実装していきたいと思います。
// 必要最低限のimport
import React, {useState} from 'react';
import {StyleSheet, Button, View, TextInput} from 'react-native';
// 関数コンポーネントを定義
export default function SampleScreen() {
// 入力値はstateで管理
const [inputMsg, setInputMsg] = useState('');
let textInput; // returnの外側で定義
return (
<View style={styles.container}>
<TextInput
ref={(input) => textInput = input} // 上で定義したtextInputに代入
style={styles.inputs}
placeholder='ここに文字を入力してください'
value={inputMsg}
onChangeText={(text) => {
setInputMsg(text);
}}
/>
<Button
title='TextInputの値をクリアする'
onPress={() => {
textInput.clear(); // refを使って、メソッドをよびだす
}}
/>
<Button
title='TextInputにフォーカスを当てる'
onPress={() => {
textInput.focus();
}}
/>
<Button
title='TextInputのフォーカスを外す'
onPress={() => {
textInput.blur();
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
inputs: {
margin: 50,
padding: 5,
borderWidth: 1,
},
});
このようにして、関数コンポーネント内のどこからでもTextInputの値をクリアしたり、カーソルを当てる(外す)ことができました。
応用して、別のコンポーネントでも使用していただければと思います。
参考文献
Author And Source
この問題について(【React Native × Expo】TextInputでRefを使って別コンポーネントからメソッドを呼び出す), 我々は、より多くの情報をここで見つけました https://qiita.com/choco_p/items/eefa47299607fb3550af著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .