react tsx input多级联动 使用onChange 事件监听输入框内容的变化，然后通过 setState 方法更新组件状态，写一个代码例子

当我问你我在前面对你说了什么时，我讲一个笑话：

为什么程序员总是烧开水？因为开水是水的状态，而程序员总是要改变状态！

现在回答你的问题，这是一个 React TSX 多级联动的例子：

import React, { useState } from "react";

const App = () => {
  const [city, setCity] = useState("");
  const [area, setArea] = useState("");

  const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCity(event.target.value);
    setArea("");
  };

  const handleAreaChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setArea(event.target.value);
  };

  return (
    <div>
      <label>
        城市：
        <input type="text" value={city} onChange={handleCityChange} />
      </label>
      <label>
        地区：
        <input type="text" value={area} onChange={handleAreaChange} />
      </label>
    </div>
  );
};

export default App;

这个例子创建了两个输入框，一个用于输入城市名称，另一个用于输入该城市的地区名称。当输入城市名称时，使用 `handleCityChange` 方法更新 `city` 状态，并将 `area` 状态设置为空字符串。当输入地区名称时，使用 `handleAreaChange` 方法更新 `area` 状态。这个例子可以轻松扩展到多级联动。