Programmatically cause onBlur to trigger in react

user_8224849 0
Viewed 18789

I use onBlur to close a dropdown, but I also want to handle a click handler of an li which is render within, setState won't work here, the behavior is broken when user try to open the dropdown again, try it here:

http://jsfiddle.net/ur1rbcrz

My code:

toggleDropdown = () => {
    this.setState({
        openDropdown: !this.state.openDropdown
    })
  }

  render() {
    return (
      <div>
        <div tabIndex="0" onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={()=> this.setState({openDropdown:false})}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }
reactjs ecmascript-6 javascript
3 Answers

OnBlur is a React Synthetic event and can be used in two ways:

  1. To trigger something:

const {useState} = React;

const Example = ({title}) => {
  const [field, setField] = useState("");

  return (
    <div>
      <p>{title}</p>
      <p>Uppercase on blur</p>
      <input type="text" 
      value={field} 
      onChange={e=>setField(e.target.value)}
      //LOOK HERE !
      onBlur={e=>setField(e.target.value.toUpperCase())}
      />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="OnBlur triggering:" />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

  1. Be triggered by something

const {
  useState,
} = React;

const Example = ({
  title
}) => {
  const [field, setField] = useState("");

  return ( <
    div >
    <
    p > {
      title
    } < /p> <
    p > Remove focus by pressing enter < /p> <
    input type = "text"
    value = {
      field
    }
    onChange = {
      e => setField(e.target.value)
    }
    //LOOK HERE !
    onBlur = {
      e => setField(e.target.value.toUpperCase())
    }
    onKeyPress = {
      e => (e.key === 'Enter' ? setField(e.target.value.toLowerCase()) || e.target.blur() : null)
    }
    /> < /
    div >
  );
};

// Render it
ReactDOM.render( <
  Example title = "OnBlur triggered:" / > ,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

So to programmatically cause onBlur to trigger in react is necessary add an event to watch your change.

More info: React SyntheticEvents

user_103358660
Related