Question

我正在尝试创建一个可重用的组件，这是一个不受控制的输入。通常情况下这很好用，但是我无法使用styled-components应用于子组件（value返回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元素的引用：

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

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

所以只需将ref更改为innerRef组件上的<StyledInput>：

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

这是working example。

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

1 个答案: