如何通过ref获取StyledComponent输入框的value值

我完全明白你遇到的困扰——直接给styled.input创建的组件加ref，拿到的根本不是原生input的DOM节点，自然没法获取value值。这是因为styled-components会把原生元素包装成一个React组件，普通ref只会指向这个包装层，而非底层的input元素。下面给你两种靠谱的解决办法：

方法一：使用React的forwardRef（推荐） #

这是React官方推荐的传递ref的方式，也是styled-components现在建议使用的方案。你需要把styled组件用forwardRef包裹，手动把ref传递给内部的原生input：

import styled from 'styled-components';
import { forwardRef, useRef } from 'react';

// 先定义样式化的input
const StyledInput = styled.input`
  background-image: linear-gradient(#20aee3, #20aee3), linear-gradient(#bfbfbf, #bfbfbf);
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  float: none;
  background-color: transparent;
  background-position: center bottom, center calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 1px;
  /* 这里可以继续添加你的其他样式 */
`;

// 用forwardRef包装，把ref传递给StyledInput
const Input = forwardRef((props, ref) => {
  return <StyledInput ref={ref} {...props} />;
});

// 在组件中使用
function YourFormComponent() {
  const inputRef = useRef(null);

  const handleGetInputValue = () => {
    if (inputRef.current) {
      console.log('输入框的值:', inputRef.current.value);
    }
  };

  return (
    <div>
      <Input ref={inputRef} placeholder="请输入内容" />
      <button onClick={handleGetInputValue}>获取输入值</button>
    </div>
  );
}

方法二：使用innerRef属性（旧版兼容方案） #

如果你的项目使用的是较老版本的styled-components（v4及以前），可以用它提供的innerRef属性，它会帮你把ref直接绑定到底层的原生DOM元素：

import styled from 'styled-components';
import { useRef } from 'react';

const Input = styled.input`
  /* 你的样式代码 */
  background-image: linear-gradient(#20aee3, #20aee3), linear-gradient(#bfbfbf, #bfbfbf);
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  float: none;
  background-color: transparent;
  background-position: center bottom, center calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 1px;
`;

// 使用时用innerRef代替ref
function YourFormComponent() {
  const inputRef = useRef(null);

  const handleGetInputValue = () => {
    if (inputRef.current) {
      console.log('输入框的值:', inputRef.current.value);
    }
  };

  return (
    <div>
      <Input innerRef={inputRef} placeholder="请输入内容" />
      <button onClick={handleGetInputValue}>获取输入值</button>
    </div>
  );
}

简单总结一下：不管用哪种方法，核心都是把ref传递到真正的原生input元素上，而不是停留在styled-components的包装组件层。推荐优先用forwardRef，因为它是React的标准API，兼容性和未来性更好。

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