如何在选择 <InputA /> 的值后检查 <InputB /> 是否有值？

Question

我有以下两个输入组件：

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>
  )
}

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

谢谢！

Answer 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>
  )
}