react+ts 获取Input框中的值，并赋值给其他参数

我真的不想秃头呀

于 2023-07-19 19:23:56 发布

阅读量918

点赞数 1

分类专栏： react+antd 文章标签： typescript react.js reactjs

本文链接：https://blog.youkuaiyun.com/weixin_57424543/article/details/131815937

版权

本文介绍了如何在React TypeScript应用中实现Input输入框和Select下拉框的值同步，并处理输入框为空时自动赋值为0的情况。通过创建状态变量保存Input值，绑定onChange和onBlur事件，确保在输入框失去焦点且值为空时转换为0。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要将下方Input框中的值，同步至Select下拉框的选项中。且在输入框中没有值时，将输入框中的值重新赋值为0。

在函数组件中，创建一个状态变量来保存输入框中的值
将输入框的value属性和onChange事件处理函数绑定到状态变量
将onChange事件处理函数绑定到相应的状态变量

需要处理在输入框没有值，且当删除最后一个数字后，Input输入框中的值就会自动变为0。需要判断当输入框的值为空字符串时，将其转换为0。且添加一个onBlur事件处理函数，当输入框失去焦点时，检查输入框的值是否为空字符串，如果是，则将其转换为0。

具体代码如下：

export default withError(() => {
  const navigate = useNavigate();
  const [basicForm] = Form.useForm();

 //在函数组件中，创建一个状态变量来保存输入框中的值
  const [inputValue, setInputValue] = useState('0');

  return (
    <SettingLayout
      name="中国"
      left={
        <Button onClick={() => navigate('/settings/taxes