Focusing div elements with React

Question

Is it possible to focus div (or any other elements) using the focus() method?

I\'ve set a tabIndex to a div element:

        
                      

              相关标签:
       
      

Answer 1

This is the problem:

this.setState({ active: state });
this.refs.component.focus();

Set state is rerendering your component and the call is asynchronous, so you are focusing, it's just immediately rerendering after it focuses and you lose focus. Try using the setState callback

this.setState({ active: state }, () => {
   this.refs.component.focus();
});

Answer 2

Not sure if this is the proper way, but I found that this worked for me.

render() {
  return <div ref='item' onLoad={() => this.refs.item.focus()}>I will have focus</div>
}

Answer 3

import React from "react"
import ReactDOM from 'react-dom';

export default class DivFocusReactJs extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.divFocus).focus();
  }

  render() {
    return (
      <div tabIndex={1} ref="divFocus">
        <p>Focusing div elements with React</p>
        {/*your code here...*/}
      </div>
    )
  }
}

Answer 4

A little late to answer but the reason why your event handler is not working is probably because you are not binding your functions and so 'this' used inside the function would be undefined when you pass it as eg: "this.selectItem(color)"

In the constructor do:

this.selectItem = this.selectItem.bind(this)

this.setActive = this.setActive.bind(this)

Answer 5

React redraws the component every time you set the state, meaning that the component loses focus. In this kind of instances it is convenient to use the componentDidUpdate or componentDidMount methods if you want to focus the element based on a prop, or state element.

Keep in mind that as per React Lifecycle documentation, componentDidMount will only happen after rendering the component for the first time on the screen, and in this call componentDidUpdate will not occur, then for each new setState, forceUpdate call or the component receiving new props the componentDidUpdate call will occur.

componentDidMount() {
  this.focusDiv();
},
componentDidUpdate() {
  if(this.state.active)
    this.focusDiv();
},
focusDiv() {
  ReactDOM.findDOMNode(this.refs.theDiv).focus();
}

Here is a JS fiddle you can play around with.

Answer 6

This worked in my case

render: function(){

  if(this.props.edit){
    setTimeout(()=>{ this.divElement.focus() },0)
  }

    return <div ref={ divElement => this.divElement = divElement}
                contentEditable={props.edit}/>
}