styled-components Refs

Refs

通过传递ref prop给 styled component 将获得:

• 底层 DOM 节点 (如果 styled 的对象是基本元素如 div)
• React 组件实例 (如果 styled 的对象是 React Component)

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}

render(
  <Form />
);

注意v3 或更低的版本请使用 innerRef prop instead.