styled-components Refs

Refs

通過傳遞ref prop給 styled component 將獲得:

• 底層 DOM 節(jié)點(diǎn) (如果 styled 的對象是基本元素如 div)
• React 組件實(shí)例 (如果 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.