带有样式组件的不受控制的子组件

Question

我正在尝试创建一个不受控制的输入的可重用组件。通常这工作正常，但我无法使用应用于子组件的 styled-components (value returns undefined).

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}
    />
  )
};

Answer 1

styled-components 将元素包装到 React 组件中。将 ref 属性传递给它不会为您提供对 DOM 元素的引用，而是对包装器组件的引用。

在 styled-components docs 中描述了如何获取对基础 DOM 元素的引用：

Passing a ref prop to a styled component will give you an instance of the StyledComponent wrapper, but not to the underlying DOM node. This is due to how refs work. It's not possible to call DOM methods, like focus, on our wrappers directly.

To get a ref to the actual, wrapped DOM node, pass the callback to the innerRef prop instead.

因此，只需将 <StyledInput> 组件上的 ref 更改为 innerRef：

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

这里是working example.

带有样式组件的不受控制的子组件

Uncontrolled child component with styled-components

javascript

reactjs

styled-components