Javascript 我正在使用react js和jsx，并试图在单击时获得一个简单的搜索输入字段

我试图获得一个搜索输入字段，当点击到200px时进行扩展。react js正在正确设置初始宽度，但当我单击它时，输入框没有设置为新宽度。函数名为expandSearch，位于代码底部。代码如下：

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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react router dom'导入{Link}；
从“/MegaMenuOverlay”导入MegaMenuOverlay；
导入“./MegaMainMenu.css”；
常量属性={
megaMenu:PropTypes.arrayOf（PropTypes.shape(
{
标题：PropTypes.string，
图像：PropTypes.shape(
{
Src:PropTypes.string，
Alt:PropTypes.string，
}),
子对象：PropTypes.arrayOf（PropTypes.shape(
{
标题：PropTypes.string，
Url:PropTypes.string，
},
)),
},
)).要求，
};
类MegaMain菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
megaMenuContent:null，
showOverlay:错，
新宽度：正确，
};
this.handleMenuEnter=this.handleMenuEnter.bind（this）；
this.handleMenuLeave=this.handleMenuLeave.bind（this）；
}
扶手菜单输入（e）{
这是我的国家({
megaMenuContent:null，
});
const id=e.target.id；
这个。removeActiveMenu（）；
e、 target.classList.add（'active'）；
const currentMenu=Number（id.substring（id.length-1））；
这是我的国家({
主要内容：{
Image:this.props.megaMenu[currentMenu]。Image，
项目：this.props.megaMenu[currentMenu]。Children，
},
});
}
handleMenuLeave（）{
这是我的国家({
megaMenuContent:null，
});
这个。removeActiveMenu（）；
}
removeActiveMenu（）{
if（document.querySelector（'.mega-main-menu\u items>li.active'））{
document.querySelector（'.mega-main-menu\u items>li.active'）.classList.remove（'active'）；
}
}
render（）{
设newWidth=this.state.new_width？“100px”：“200px”；
const menuItems=this.props.megaMenu.map（（菜单，索引）=>(

{menu.Title}

));
返回(

{menuItems}
{
this.state.megaMenuContent！==null？（）：“”
}

this.expandSearch.bind（this）}/>
);
}
expandSearch（）{
this.setState（{new_width:！this.state.new_width}）
}
}
MegaMainMenu.propTypes=属性；
导出默认MegaMain菜单；

这方面的任何帮助都会有很大帮助。

onClick={（）=>this.expandSearch.bind（this）}

到

onClick={this.expandSearch.bind（this）}

onClick={（）=>this.expandSearch.bind（this）}

到

---

onClick={this.expandSearch.bind（this）}

为什么不使用

onfocus

和

onfocusout

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

this.setState（{width:“200px”}）
onfocusout={（）=>this.setState（{width:“100px”}）}>

为什么不使用

onfocus

和

onfocusout

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

this.setState（{width:“200px”}）
onfocusout={（）=>this.setState（{width:“100px”}）}>

不是解决方案，而是代码组织注释：请尝试将

expandSearch

（以及所有未来函数）放在

渲染

函数上方。我希望您调试一些东西，在

expandSearch

函数内设置断点。当你点击时，你的函数会被调用吗？那没有帮助。感谢您的组织提示。将onClick={（）=>this.expandSearch.bind（this）}更改为onClick={this.expandSearch.bind（this）}不是一个解决方案，而是一个代码组织注释：请尝试将

expandSearch

（以及所有未来的函数）置于

呈现

函数之上。我希望您调试一些东西，在

expandSearch

函数中设置断点。当你点击时，你的函数会被调用吗？那没有帮助。感谢您提供的组织技巧。将onClick={（）=>this.expandSearch.bind（this）}更改为onClick={this.expandSearch.bind（this）}