ReactNative+Type ScriptではTextInput onChangeとUserRef

4364 ワード
reactnative onchange Event TextInput typescript テキストリンク

userefを使用してフォーカスを移動する


前回はtypescriptで複数のTextInputを必要に応じて整理しました.前回Post
2つのTextInputで、最初のTextInputが入力されてコミットされた場合、userRefを使用して次の入力TextInputにフォーカスを移動します.
以下のように簡単に書くだけであれば、正常に動作します.
const secondRef = useRef();
しかしvscodeにはいくつかの赤い線が見えます.気分が悪いようです.

userefではtypeはnullのままになります.以下に示します.
const secondRef = useRef(null);
onSubmitEditing部分にnullがあるかも?使用します.
onSubmitEditing={() => secondRef.current?.focus()}
2本の赤い糸が消える.

onChangeイベントタイプは？


ReactNativeでonChangeイベントタイプを決定する方法は、vscodeからイベントにカーソルを移動することで、次のような内容が表示されます.
(parameter) e: NativeSyntheticEvent
event typeはNativeSysticsEventと見なすことができる.
onChange関数でevent typeを定義して入れます.
const onChange = (keyvalue: string, e: NativeSyntheticEvent<TextInputChangeEventData>) => {
        const {text} = e.nativeEvent
        setInputs({
          ...inputs, 
          [keyvalue]: text 
        });
      };
でもvscodeから見ると赤い糸が情報は以下の通りです.
type NativeSyntheticEvent =/unresolved/any
Cannot find name 'NativeSyntheticEvent'.ts(2304)
解決するために、輸入することができます.
import { 
  View, 
  Text, 
  TextInput, 
  StyleSheet, 
  NativeSyntheticEvent, 
  TextInputChangeEventData } from 'react-native'

完全なコード

import React, {useState, useRef} from 'react'
import { 
    View, 
    Text, 
    TextInput, 
    StyleSheet, 
    NativeSyntheticEvent, 
    TextInputChangeEventData } from 'react-native'

export default function MyFormSecond() {
    const secondRef = useRef<TextInput | null>(null);
    const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
      });

    const { name, nickname } = inputs;
    
    const onChange = (keyvalue: string, e: NativeSyntheticEvent<TextInputChangeEventData>) => {
        const {text} = e.nativeEvent
        setInputs({
          ...inputs, 
          [keyvalue]: text 
        });
      };
    
      const onReset = () => {
        setInputs({
          name: '',
          nickname: '',
        })
      };


    return (
        <View>
            <TextInput
                style={styles.input}
                onChange={(e) => onChange("name", e)}
                value={name}
                onSubmitEditing={() => secondRef.current?.focus()}
            />
            <TextInput
                style={styles.input}
                onChange={(e) => onChange("nickname", e)}
                value={nickname}
                onSubmitEditing={onReset}
                ref={secondRef}
            />
            <Text>name: {name}, nickname: {nickname}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    input: {
      height: 50,
      width: 200,
      margin: 12,
      borderWidth: 1,
      padding: 10,
    },
  });
[C++]伯俊10989:数列3
Uncaught SyntaxError: Unexpected token '<'