我正在做一个项目,我正在使用谷歌自动完成.

const SuggestionRow = ({ item }) => (
  <View style={{}}>
    <View style={{}}></View>
    <Text style={{}}>{item.description}</Text>
  </View>
);
const SCREEN_WIDTH = Dimensions.get("window").width;

export default function MapSearch({ setLocation }) {
  let predefined = [];

  const placesRef = useRef();

  return (
    <View style={{ width: SCREEN_WIDTH, paddingHorizontal: 5 }}>
      <GooglePlacesAutocomplete
        placeholder="Search"
        onPress={(data, details) => {
          setLocation(details);
        }}
        minLength={4}
        fetchDetails
        styles={{
          textInput: styles.textInput,
        }}
        query={{
          key: "",
          language: "en",
        }}
        predefinedPlaces={predefined}
        suppressDefaultStyles
        ref={placesRef}
        renderRow={(item) => <SuggestionRow item={item} />}
      />
    </View>
  );
}

我需要能够获得用户在他/她打字时键入的内容.我一直在try 使用useRef()来实现这一点,但是当我在屏幕上输入时,它没有更新.我曾try 使用useEffect执行此操作:

const [inputValue, setInputValue] = useState()
useEffect(() => {
  setInputValue(placesRef.current?.getAddressText())
})
console.log('inputValue',inputValue)

但我在我的控制台上没有得到任何值或更新.我还try 使用useCallback():

const placesRef = useCallback(node => {
  if (node?.current?.length > 0) {
    setInputValue(node.current?.getAddressText();
  }
}, []);

但这对我来说也不管用.我真的很感激任何关于如何做到这一点的帮助或建议.谢谢!

推荐答案

ref对象的更改不会导致重新呈现,因此placesRef.current?.getAddressText()在被调用时返回信息,但它永远不会被调用,因为组件不会被重新呈现.

将一个对象传递给GooglePlacesAutocompletetextInputProps(请参见docs)属性,并将setInputValue作为onChangeText处理程序传递,以便在TextInput中的文本更改时更新状态:

textInputProps={{
  onChangeText: setInputValue
}}

示例:

export default function MapSearch ({setLocation}) {
  const [inputValue, setInputValue] = useState();
  
  let predefined = [];

  const placesRef = useRef();

  return (
  <View style={{width:SCREEN_WIDTH, paddingHorizontal:5}}>
    <GooglePlacesAutocomplete
      textInputProps={{
        onChangeText: setInputValue
      }}
      placeholder='Search'
      onPress={(data, details) => {
       setLocation(details)
      }}
      minLength={4}
      fetchDetails
      styles={{
        textInput: styles.textInput,
      }}
      query={{
        key: '',
        language: 'en'
      }}
      predefinedPlaces={predefined}
      suppressDefaultStyles
      ref={placesRef}
      renderRow={(item) => <SuggestionRow item={item} />}
    />
  </View>
  )
}

Reactjs相关问答推荐

安装后未渲染tailwind

TypeError:b不是React.js中的函数错误

Tailwind不使用@apply classes构建,并强制使用类似于移动的viewport

使用筛选器的Primereact DataTable服务器端分页?

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

阻止组件更新的多分派Redux Thunk或setState是否有任何问题

如何在MUI x图表条形图上放置圆角?

useMemo 依赖项的行为

Material UI @mui/material/Button vs @material-ui/core/Button,它什么时候改变的,旧版本的文档在哪里

React Native 背景动画反转

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

Select 项目后 Select HeadlessUI 组合框中的所有文本?

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流,那么 vdom 有什么用?

从 API 中提取映射数组后出现重复元素

设置 Material UI 表格默认排序

Lodash 在命名导入中导入整个包

在 Redux 中更新布尔状态时出错

如何在 NavBar 中设置动态标题