docs(select): change demo to hook (#27736)

components/select/demo/coordinate.md

@@ -27,51 +27,34 @@ const cityData = {
   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
 };
 
-class App extends React.Component {
-  state = {
-    cities: cityData[provinceData[0]],
-    secondCity: cityData[provinceData[0]][0],
+const App = () => {
+  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
+  const [secondCity, setSecondCity] = React.useState(cityData[provinceData[0]][0]);
+
+  const handleProvinceChange = value => {
+    setCities(cityData[value]);
+    setSecondCity(cityData[value][0]);
   };
 
-  handleProvinceChange = value => {
-    this.setState({
-      cities: cityData[value],
-      secondCity: cityData[value][0],
-    });
+  const onSecondCityChange = value => {
+    setSecondCity(value);
   };
 
-  onSecondCityChange = value => {
-    this.setState({
-      secondCity: value,
-    });
-  };
-
-  render() {
-    const { cities } = this.state;
-    return (
-      <>
-        <Select
-          defaultValue={provinceData[0]}
-          style={{ width: 120 }}
-          onChange={this.handleProvinceChange}
-        >
-          {provinceData.map(province => (
-            <Option key={province}>{province}</Option>
-          ))}
-        </Select>
-        <Select
-          style={{ width: 120 }}
-          value={this.state.secondCity}
-          onChange={this.onSecondCityChange}
-        >
-          {cities.map(city => (
-            <Option key={city}>{city}</Option>
-          ))}
-        </Select>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Select defaultValue={provinceData[0]} style={{ width: 120 }} onChange={handleProvinceChange}>
+        {provinceData.map(province => (
+          <Option key={province}>{province}</Option>
+        ))}
+      </Select>
+      <Select style={{ width: 120 }} value={secondCity} onChange={onSecondCityChange}>
+        {cities.map(city => (
+          <Option key={city}>{city}</Option>
+        ))}
+      </Select>
+    </>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```