Javascript 带有样式化组件的非受控子组件

我试图创建一个可重用的组件，它是一个不受控制的输入。通常这很好，但我无法让它与应用于子组件的

样式化组件一起工作（
value
返回
未定义的
）

类父级扩展组件{
handleSubmit=（事件）=>{
console.log（this.firstName.value）
event.preventDefault（）；
}
render（）{
返回(
名字
{this.firstName=element}
/>
提交
)
}
}
const StyledInput=styled.input`
边框：3倍实心；
`;
const uncontrolleInput=（道具）=>{
const{name，inputType，defaultValue，inputRef}=props；
返回(
)
};
样式化组件
将元素包装到react组件中。将
ref
prop传递给它将不会提供对DOM元素的引用，而是对包装器组件的引用

在中，描述了如何获取对底层DOM元素的引用：

将ref prop传递给样式化组件将为您提供StyledComponent包装器的实例，但不会传递给底层DOM节点。这是由于引用的工作方式。直接在包装器上调用DOM方法（如focus）是不可能的

要获取对实际包装的DOM节点的引用，请将回调传递给innerRef prop

因此，只需在
组件上将
ref
更改为
innerRef
：

const uncontrolleInput=（道具）=>{
const{name，inputType，defaultValue，inputRef}=props；
返回(
)
};

这是一本书

class Parent extends Component {
  handleSubmit = (event) => {
    console.log(this.firstName.value)
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          <label>First Name</label>
          <UncontrolledInput
            defaultValue={'fish'}
            inputType='text'
            name='firstName'
            inputRef={(element) => {this.firstName = element}}
          />
          <button type="submit">
            Submit
          </button>
      </form>
    )
  }
}


const StyledInput = styled.input`
  border: 3px solid;
`;

const UncontrolledInput = (props) => {
  const {name, inputType, defaultValue, inputRef} = props;
    return (
    <StyledInput
      name={name}
      type={inputType}
      defaultValue={defaultValue ? defaultValue : ''}
      ref={inputRef}
    />
  )
};