web-dev-qa-db-ja.com

スタイル付きコンポーネントの入力フォーカス

コンポーネントがマウントされるときに、入力に焦点を当てようとしています。入力コンポーネントはスタイル付きコンポーネントなので、innerRefを使用して要素への参照を取得します。ただし、コンポーネントがマウントされると、入力はフォーカスされません。ノードが実際にDOMノードへの参照を取得していることを確認しました。ロジックに問題を見つけることができません。ご協力ありがとうございました。

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import styled, { keyframes } from 'styled-components';

const UrlInput = styled.input`
  width: 400px;
  height: 34px;
  background-color: white;
  display: inline-block;
  outline: none;
  padding-left: 10px;
  font: 400 14px 'Source Sans Pro', 'sans-serif';
  ::placeholder {
    color: rgb(100,100,100);
    font: 400 14px 'Source Sans Pro', 'sans-serif';
  }
`

class AddUrl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: ''
    }
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    const node = findDOMNode(this.inputRef.current);
    node && node.focus();
  }


  render() {
    return(
      <AddUrlWrapper>
        <UrlInput placeholder={"Paste URL here"}
          innerRef={this.inputRef}
          type="text"
          value={this.state.url}
          onChange={(event) => this.setState({url: event.target.value})}/>
        <FetchButton>Fetch</FetchButton>
      </AddUrlWrapper>
    )
  }
}
reactjsstyled-components
8
quantdaddy

スタイル付きコンポーネントの場合、innerRefではなくprop refを使用します。彼らのドキュメントからそれを得た here 。

ドキュメントの例：

<StyledInput innerRef={this.input} />

試してみて、うまくいく

1
Flemin Adambukulam

setTimeoutがトリックをしました。

  componentDidMount() {
    const node = findDOMNode(this.inputRef.current);
    setTimeout(() => node && node.focus(), 0);
  }
0
quantdaddy