javascript - React how to use refs to focusblur? - Stack Overflow

admin管理员组

文章数量:1026223

I'm reading the React documentation from Reactjs but it doesn't seem to be working for what I want to do.

I want to render a ponent with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.

I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.

This is what my ponent looks like so far, which is a child ponent:

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

Looking at the sample code provided by react.js, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, focusRef is triggered but focusEvent is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?

I would prefer a solution that does not involve hooks, if possible.

I'm reading the React documentation from Reactjs but it doesn't seem to be working for what I want to do.

I want to render a ponent with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.

I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.

This is what my ponent looks like so far, which is a child ponent:

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

Looking at the sample code provided by react.js, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, focusRef is triggered but focusEvent is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?

I would prefer a solution that does not involve hooks, if possible.

• javascript
• html
• reactjs

Share Improve this question Follow asked Mar 17, 2021 at 6:36 JonJon 65122 gold badges77 silver badges1515 bronze badges 1

• Focus works on input not on div. Trying changing div to input – Shubham Verma Commented Mar 17, 2021 at 6:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

In order for a div element to be focusable it needs to be made interactable. Add a tab index to the div so it can be given focus.

function App() {
  return (
    <div className="App">
      <div 
        tabIndex={0} 
        onFocus={() => console.log('focus')} 
        onBlur={() => console.log('blur')}
      >
        Click or tab to me!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here is a toggleable/focusable div/input. It uses state to hold whether or not a div or input should be rendered, and a ref and ponentDidUpdate method to refocus on the input after switching up the view.

class App extends React.Component {
  textInputRef = React.createRef();

  state = {
    isInput: false,
    value: "test"
  };

  ponentDidUpdate() {
    const { isInput } = this.state;
    isInput && this.textInputRef.current.focus();
  }

  handleFocus = () => {
    console.log("focus");
    this.setState({ isInput: true });
  };

  handleBlur = () => {
    console.log("blur");
    this.setState({ isInput: false });
  };

  handleChange = (e) => this.setState({ value: e.target.value });

  render() {
    const { isInput, value } = this.state;
    return (
      <div className="App">
        {isInput ? (
          <input
            type="text"
            ref={this.textInputRef}
            value={value}
            onBlur={this.handleBlur}
            onChange={this.handleChange}
          />
        ) : (
          <div tabIndex={0} onFocus={this.handleFocus}>
            {value}
          </div>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

I'm reading the React documentation from Reactjs but it doesn't seem to be working for what I want to do.

I want to render a ponent with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.

I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.

This is what my ponent looks like so far, which is a child ponent:

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

Looking at the sample code provided by react.js, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, focusRef is triggered but focusEvent is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?

I would prefer a solution that does not involve hooks, if possible.

I'm reading the React documentation from Reactjs but it doesn't seem to be working for what I want to do.

I want to render a ponent with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.

I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.

This is what my ponent looks like so far, which is a child ponent:

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

Looking at the sample code provided by react.js, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, focusRef is triggered but focusEvent is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?

I would prefer a solution that does not involve hooks, if possible.

• javascript
• html
• reactjs

Share Improve this question Follow asked Mar 17, 2021 at 6:36 JonJon 65122 gold badges77 silver badges1515 bronze badges 1

• Focus works on input not on div. Trying changing div to input – Shubham Verma Commented Mar 17, 2021 at 6:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

In order for a div element to be focusable it needs to be made interactable. Add a tab index to the div so it can be given focus.

function App() {
  return (
    <div className="App">
      <div 
        tabIndex={0} 
        onFocus={() => console.log('focus')} 
        onBlur={() => console.log('blur')}
      >
        Click or tab to me!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here is a toggleable/focusable div/input. It uses state to hold whether or not a div or input should be rendered, and a ref and ponentDidUpdate method to refocus on the input after switching up the view.

class App extends React.Component {
  textInputRef = React.createRef();

  state = {
    isInput: false,
    value: "test"
  };

  ponentDidUpdate() {
    const { isInput } = this.state;
    isInput && this.textInputRef.current.focus();
  }

  handleFocus = () => {
    console.log("focus");
    this.setState({ isInput: true });
  };

  handleBlur = () => {
    console.log("blur");
    this.setState({ isInput: false });
  };

  handleChange = (e) => this.setState({ value: e.target.value });

  render() {
    const { isInput, value } = this.state;
    return (
      <div className="App">
        {isInput ? (
          <input
            type="text"
            ref={this.textInputRef}
            value={value}
            onBlur={this.handleBlur}
            onChange={this.handleChange}
          />
        ) : (
          <div tabIndex={0} onFocus={this.handleFocus}>
            {value}
          </div>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

本文标签： javascriptReact how to use refs to focusblurStack Overflow