React表单Input组件无法修改输入值 如何实现自定义ID提交GET请求

你当前的问题核心是没有用React状态管理输入框的输入值，输入框绑定了固定常量导致无法修改，同时存在多处语法和逻辑错误，修改后可正常实现需求：

核心修改点 #

• 新增inputId状态专门存储输入框的ID值，初始值设为默认的123456，删除原有的default变量（default是JavaScript保留关键字，不能用作变量名）
• 完善handleChange回调逻辑，每次输入时实时更新inputId状态
• 修正表单提交事件的类型定义，将React.ChangeEvent改为表单提交专用的React.FormEvent
• 修正接口请求路径的模板字符串语法，直接把用户输入的inputId拼接到请求URL中
• 将输入框的value属性绑定到inputId状态，保证输入和视图同步
• 修正组件导出名称，组件定义为Items，导出语句要对应

完整修复后代码 #

import { useState } from 'react';
import axios from 'axios';
// 需自行引入项目中的Input、Button组件

const Items: React.FC = () => {
  interface Item {
    id?: number;
    name?: string;
  }

  // 存储输入的ID，初始值为默认值123456
  const [inputId, setInputId] = useState<string>('123456');
  const [item, setItem] = useState<Item>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 输入时同步更新状态
    setInputId(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    axios
      .get(`myUrl/${inputId}`)
      .then((response) => setItem(response.data))
      .catch((error) => console.log(error));
  };

  return (
    <div className="toolbar-content">
      <div className="row">
        <form onSubmit={handleSubmit}>
          <div className="label"> MAC Address:</div>
          <Input value={inputId} onChange={handleChange}/>
          <Button className="btn" type="submit">
            SUBMIT
          </Button>
        </form>
      </div>
    </div>
  );
};

export default Items;

内容的提问来源于stack exchange，提问作者Devstar34