I am using react js and jsx and trying to get a simple search input field to grow when clicked

Question

I am trying to get a search input field to expand when clicked to 200px. The react js is setting the initial width properly but when I click it the input box does not get set to the new width. The function name is expandSearch at the bottom of the code. The code is below:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import MegaMenuOverlay from './MegaMenuOverlay';
import './MegaMainMenu.css';

const properties = {
  megaMenu: PropTypes.arrayOf(PropTypes.shape(
    {
      Title: PropTypes.string,
      Image: PropTypes.shape(
        {
          Src: PropTypes.string,
          Alt: PropTypes.string,
        }),
      Children: PropTypes.arrayOf(PropTypes.shape(
        {
          Title: PropTypes.string,
          Url: PropTypes.string,
        },
      )),
    },
  )).isRequired,
};

class MegaMainMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      megaMenuContent: null,
      showOverlay: false,
      new_width: true,
    };
    this.handleMenuEnter = this.handleMenuEnter.bind(this);
    this.handleMenuLeave = this.handleMenuLeave.bind(this);
  }
  handleMenuEnter(e) {
    this.setState({
      megaMenuContent: null,
    });
    const id = e.target.id;
    this.removeActiveMenu();
    e.target.classList.add('active');
    const currentMenu = Number(id.substring(id.length - 1));
    this.setState({
      megaMenuContent: {
        Image: this.props.megaMenu[currentMenu].Image,
        Items: this.props.megaMenu[currentMenu].Children,
      },
    });
  }
  handleMenuLeave() {
    this.setState({
      megaMenuContent: null,
    });
    this.removeActiveMenu();
  }
  removeActiveMenu() {
    if (document.querySelector('.mega-main-menu__items > li.active')) {
      document.querySelector('.mega-main-menu__items > li.active').classList.remove('active');
    }
  }
  render() {
    let newWidth = this.state.new_width ? "100px" : "200px";
    const menuItems = this.props.megaMenu.map((menu, index) => (
      <li
        className="text-uppercase"
        id={`menu-item-${index}`}
        key={`menu-item-${menu.Title}`}
        onMouseOver={this.handleMenuEnter}
      >
        {menu.Title} <span className="fa fa-chevron-down" />
      </li>
    ));
    return (
      <nav className="mega-main-menu">
        <div className="mega-main-menu__logo-container">
          <Link className="mega-main-menu__logo" to="/">
            <img
              src="../../assets/images/logo.png"
              alt=""
              width="264"
              height="50"
            />
          </Link>
        </div>
        <div className="mega-main-menu__items-container" onMouseLeave={this.handleMenuLeave}>
          <ul className="mega-main-menu__items list--nostyle">
            {menuItems}
            {
              this.state.megaMenuContent !== null ? (<MegaMenuOverlay content={this.state.megaMenuContent} />) : ''
            }
          </ul>
        </div>
        <div className="mega-main-menu__actions">
          <a href="#" className="btn dropdown-toggle red-button">MY Home</a>
          <form className="search" name="search">
            <input type="text" name="search" placeholder="search" style={{width:newWidth}} onClick={() => this.expandSearch.bind(this)} />
          </form>
        </div>
      </nav>
    );
  }
  expandSearch(){
    this.setState({new_width: !this.state.new_width})
  }
}

MegaMainMenu.propTypes = properties;

export default MegaMainMenu;

Any help on this would help A LOT.

Answer 1

onClick={() => this.expandSearch.bind(this)}

至

onClick={this.expandSearch.bind(this)}

Answer 2

why not use onfocus and onfocusout

<input style={{width : this.state.width}}
       onfocus={()=> this.setState({width : "200px"})} 
       onfocusout={() => this.setState({width : "100px"})}>