Antd React中不可编辑输入框赋值及复制功能故障排查

核心问题 #

你的复制功能失效，本质是ref绑定错误：你把clientIdRef挂在了Form.Item组件上，而非实际的Input输入框，导致clientIdRef.current.value无法获取到输入框内容。同时输入框未设置不可编辑属性，不符合需求。

方案一：修正Ref绑定（基础版） #

将ref直接绑定到Input组件，同时添加readOnly属性实现不可编辑且保留复制功能：

const APIAccess = ({product_id}) => {
  const [form] = Form.useForm();
  const dbvalues = "adsd";
  const clientIdRef = useRef(null);
  const [isCopied, setIsCopied] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const copyClientId = () => {
    const clientId = clientIdRef.current.value;
    navigator.clipboard.writeText(clientId)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 1000);
      })
      .catch(err => console.error('复制失败:', err));
  };

  return (
    <Form
      name="control-hooks"
      initialValues={{ clientID: dbvalues }}
      form={form} 
    >
      <Form.Item label="Your Client ID" name="clientID"> 
        <Space>
          <Input 
            type="text" 
            value={dbvalues} 
            ref={clientIdRef}
            readOnly // 设置不可编辑，保留复制权限
          />
          <Tooltip title="copy your Client ID">      
            <Button 
              icon={isCopied ? <CheckSquareOutlined /> : <CopyOutlined />} 
              onClick={copyClientId} 
            /> 
          </Tooltip>
        </Space>
      </Form.Item>   
      <Form.Item label="Your Client Secret" name="clientSecret">
        <Input type="text" readOnly />
      </Form.Item>
    </Form>
  );
}
export default APIAccess;

方案二：利用Antd Form实例取值（推荐） #

无需手动维护ref，直接通过Form实例获取字段值，更符合Antd Form的设计逻辑：

const APIAccess = ({product_id}) => {
  const [form] = Form.useForm();
  const dbvalues = "adsd";
  const [isCopied, setIsCopied] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const copyClientId = () => {
    // 通过Form实例直接获取字段值
    const clientId = form.getFieldValue('clientID');
    navigator.clipboard.writeText(clientId)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 1000);
      })
      .catch(err => console.error('复制失败:', err));
  };

  return (
    <Form
      name="control-hooks"
      initialValues={{ clientID: dbvalues }}
      form={form} 
    >
      <Form.Item label="Your Client ID" name="clientID"> 
        <Space>
          {/* Form自动绑定initialValues中的值，无需手动设置value */}
          <Input type="text" readOnly />
          <Tooltip title="copy your Client ID">      
            <Button 
              icon={isCopied ? <CheckSquareOutlined /> : <CopyOutlined />} 
              onClick={copyClientId} 
            /> 
          </Tooltip>
        </Space>
      </Form.Item>   
      <Form.Item label="Your Client Secret" name="clientSecret">
        <Input type="text" readOnly />
      </Form.Item>
    </Form>
  );
}
export default APIAccess;

关键注意点 #

1. 不可编辑属性选择：使用readOnly而非disabled，因为disabled的输入框在部分浏览器中会被禁止复制，readOnly既能阻止编辑又保留复制权限。
2. 错误捕获：给navigator.clipboard.writeText添加catch块，方便排查浏览器权限等其他复制失败原因。
3. Form状态管理：推荐使用form.getFieldValue获取字段值，避免手动维护DOM ref，减少代码耦合。

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