-1

I am learning react and am building a little electronic store. I have this tab called "View Store". When a user clicks on it, I want a little "peek-a-boo" column to appear and let the user view some text or pictures. When a user clicks anywhere else, I want this column to disappear.

What I do is define a state prop called "peekaboo". When a user clicks on my div, I set peekaboo to true. When a user blurs out, I set peekaboo to false, but what happens is that onClick works, but onBlur does not (store button dissappears but it never reappears when I am out of focus).

class ProductPage extends Component {
  constructor() {
    super();
    this.peekClick = this.peekClick.bind(this);
    this.peekHide = this.peekHide.bind(this);

    this.state = {
      peekaboo: false
    };
  }

  peekClick = () => {
    this.setState({peekaboo: true});}

  peekHide = () => {
    this.setState({peekaboo: false});}

  render() {
    return (
      <div className="ProductPage">
        <div className="ProductPage-Left">
        {/* PROBLEM IS HERE */}
            <div className="leftViewTab" onBlur={this.peekHide}>
              {this.state.peekaboo ? (null) :
                (<div className="leftViewText" onClick={this.peekClick}>
                    View Store
              </div>)}
            </div>
        </div>

I looked at these stackoverflow posts for ideas: onclick() and onblur() ordering issue

I also found the onBlur idea on another question, but it does not seem to be working.

Community
  • 1
  • 1
RebeccaK375
  • 871
  • 3
  • 17
  • 28
  • I don't believe you can blur a div (since the opposite of blur is focus, not click) - try detecting a click elsewhere on the page? or on `` maybe? – Toby May 04 '17 at 16:47

1 Answers1

0

onBlur only applies to elements that can be focused (e.g., elements that would be selected while pressing tab). That event will never fire.

Depending on your intended behavior, you might want to explore onMouseEnter and onMouseLeave.

Jake Haller-Roby
  • 6,335
  • 1
  • 18
  • 31