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

当我从第一个GooglePlacesAutocomplete组件中选择一个值时，我想检查第二个GooglePlacesAutocomplete组件是否有一个值。我该怎么做呢？下面是我正在使用的组件的链接：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>
  )
}