如何在选择 <Input /> 的值后检查 <Input /> 是否有值？答案

【问题标题】：How to check if <InputB /> has a value after a value for <InputA /> has been selected?如何在选择 <Input /> 的值后检查 <Input /> 是否有值？
【发布时间】：2020-11-07 19:36:54
【问题描述】：

我有以下两个输入组件：

function Inputs() {
  return (      
    <div>
      <GooglePlacesAutocomplete
        onSelect={(data) => getPointA(data)}
        placeholder="Enter place or address for Point A"
      />

      <GooglePlacesAutocomplete
        onSelect={(data) => getPointB(data)}
        placeholder="Enter place or address for Point B"
        idPrefix="pointB"
      />
    </div>
  )
}

当我从第一个 GooglePlacesAutocomplete 组件中选择一个值时，我想检查第二个 GooglePlacesAutocomplete 组件是否有一个值。我怎样才能做到这一点？这是我正在使用的组件的链接：https://www.npmjs.com/package/react-google-places-autocomplete

谢谢！

【问题讨论】：

将您选择的数据存储在您的父组件中（此处为“输入”），这样您就可以检查第二个 GooglePlacesAutoComplete 是否有值

标签： javascript reactjs input google-places-api googleplacesautocomplete

【解决方案1】：

您可以将所选值的状态存储在 Inputs 组件中，以便您可以访问所选值：

function Inputs() {
  const [placeA, setPlaceA] = useState('');
  const [placeB, setPlaceB] = useState('');
  const getPointA = (data) => {
    setPlaceA(data)
  }
  const getPointB = (data) => {
    setPlaceB(data)
  }
  return (      
    <div>
      <GooglePlacesAutocomplete
        onSelect={(data) => getPointA(data)}
        placeholder="Enter place or address for Point A"
      />

      <GooglePlacesAutocomplete
        onSelect={(data) => getPointB(data)}
        placeholder="Enter place or address for Point B"
        idPrefix="pointB"
      />
    </div>
  )
}

【讨论】：