web-dev-qa-db-fra.com

focus d'entrée de composant stylisé

J'essaie de me concentrer sur l'entrée lorsque le composant est monté. Le composant d'entrée est un composant de style, j'utilise donc innerRef pour obtenir la référence à l'élément. Cependant, l'entrée n'obtient pas le focus lorsque le composant est monté. J'ai vérifié que le nœud obtient réellement la référence au nœud DOM. Je ne trouve aucun problème avec ma logique. Merci de votre aide.

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

Pour les composants stylisés, utilisez le prop innerRef au lieu de ref. Je l'ai eu de leurs documents ici .

Exemple du doc:

<StyledInput innerRef={this.input} />

Je l'ai essayé, ça marche

1
Flemin Adambukulam

setTimeout a fait l'affaire.

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