Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

188
Visualizações
Can someone explain this condition in a react task?

I have this solution for a react task and there is something I didn't understand.

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
class Input extends React.PureComponent {
  render() {
    let {forwardedRef, ...otherProps} = this.props; 
    return <input {...otherProps} ref={forwardedRef} />;
  }
}

const TextInput = React.forwardRef((props, ref) => {
  return <Input {...props} forwardedRef={ref} />
});

class FocusableInput extends React.Component {
  
  ref = React.createRef()

  render() {
    return <TextInput ref={this.ref} />;
  }

  // When the focused prop is changed from false to true, 
  // and the input is not focused, it should receive focus.
  // If focused prop is true, the input should receive the focus.
  // Implement your solution below:
  componentDidUpdate(prevProps) {
    if(!prevProps.focused && this.props.focused) this.ref.current.focus();
  }
  
  componentDidMount() {
    this.props.focused && this.ref.current.focus();
  }
}

FocusableInput.defaultProps = {
  focused: false
};

const App = (props) => <FocusableInput focused={props.focused} />;

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In componentDidUpdate the task is

   // When the focused prop is changed from false to true, 
  // and the input is not focused, it should receive focus.

So prevProps.focused was false and the negation !prevProps.focused makes it true.

And this.props.focused should be true so that the condition with the logical operator && (!prevProps.focused && this.props.focused) can be true.

But the task says it should not be true // and the input is not focused

Does that mean this.props.focused should be false?

The condition wouldn't be true with ( true && false) ?

Can someone explain what I'm not seeing?

about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

You never check if the element has focus, you only check the props.

This should probably look like this:

if(!prevProps.focused && this.props.focused && this.ref.current !== document.activeElement) this.ref.current.focus();

But checking for this seems unnecessary since focusing focused element has no performance impact.

about 4 years ago · Santiago Trujillo Relatório

0

The "input is not focused" is not about focused prop value, but whether the element is actually focused in the DOM. If this.ref.current is not focused, then this.ref.current.focus() will give keyboard focus to this.ref.current but if this.ref.current is already focused, then this.ref.current.focus() will not change anything anyway.

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda