React Native 如何使用useRef以编程方式清除TextInput

xeufq47z 于 2023-01-21 发布在 React

关注(0)|答案(2)|浏览(256)

我尝试在使用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
/>

react-native

来源：https://stackoverflow.com/questions/59655049/how-to-programmatically-clear-textinput-using-useref

2条答案

按热度按时间

bxfogqkk1#

你的ref inputRef并没有引用文本输入，而是引用了GooglePlacesAutocomplete组件，该组件中的文本输入就是你需要引用的。
如果查看the code，可以看到它的ref定义为"textInput"（第717行），并且自动完成组件使用this.refs.textInput选择它（第166行）
考虑到这一点，您应该能够通过autocomplete组件访问文本输入引用，如下所示：
inputRef.current.refs.textInput