如何使用 useRef 以編程方式清除 TextInput

Question

我試圖在使用useRef提交表單后自動清除TextInput 。

const inputRef = useRef()

這顯示了一個屬性列表。 但是，以下不起作用：

    const clearInput = () => {
        inputRef.current.value = ""
    }

它表明value不存在。

我目前正在使用react-native-google-places-autocomplete ：

<GooglePlacesAutocomplete
    ref={inputRef}
    placeholder='Search'
    minLength={1}
    autoFocus={false}
    returnKeyType={'search'} 
    keyboardAppearance={'light'} /keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
    listViewDisplayed={focus}   
    fetchDetails={true}
    textContentType={'fullStreetAddress'}
    autoCapitalize={'words'}
    selectionColor={'red'}
    clearButtonMode={'always'}
    // other properties
/>

Answer 1

您的 ref inputRef不是指文本輸入，而是指GooglePlacesAutocomplete組件。 該組件內的文本輸入是您需要引用的內容。

如果您查看代碼，您可以看到它的 ref 被定義為"textInput" （第 717 行），並且它是由帶有this.refs.textInput的自動完成組件選擇的（第 166 行）

考慮到這一點，您應該能夠通過自動完成組件訪問文本輸入引用，如下所示：

inputRef.current.refs.textInput

Answer 2

您還可以使用inputRef.current?.clear();