react input输入一次就失去焦点的问题

最新推荐文章于 2024-09-06 11:44:57 发布

绝妙神

最新推荐文章于 2024-09-06 11:44:57 发布

阅读量9.9k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_26540693/article/details/99703490

版权

react 专栏收录该内容

3 篇文章

订阅专栏

当在React组件中使用input元素时，输入一次即失去焦点可能是因为setState触发了重新渲染，而渲染过程中if...else判断导致内容变化，进而使input失去焦点。解决办法是检查并修改可能导致组件重新渲染的if...else结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题产生的原因: setState 重新render了, 而render函数中某个地方存在if else类似的判断，重新计算了if else 产生了新的内容，改变了组件，导致失去焦点

例子：
<Pager>组件存在if else
这里的内容是由Content 生成的,
里面的props.children由 if else来判断生成 ,
这是造成子组件input失去焦点的根源。
注意观察 pager的 <Content/>

子组件：
AddVipCardHome
这个组件存在一个input框，每次通过 onChange={this.handleChange}来获取输入值：

 handleChange(event:any) {
    this.setState({value: event.target.value});
}

这里每输入一个字都会setState，造成这个组件render执行了，
render执行后,由于Pager的Content 重新计算if else 产生了一个新的<div> {this.props.children}</div> ，
导致整个子组件的input框失去焦点

解决方法：
检查是否有类似if esle的结构，修改掉就好了

class PagerHome extends React.Component<{ requestStatus: RequestStatusType }, { requestStatus: RequestStatusType }> {
    constructor(props: any) {
        super(props);
        this.state = {
            requestStatus: this.props.requestStatus
        }
    }
    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        const {isLoading, isError, msg} = this.props.requestStatus;
        const Content = () => {
              if (isLoading) {
                  return <div className={"isLoading"}>
                      <div className={"loader-inner"}>
                          <div className="ball-grid-pulse">
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                              <div></div>
                          </div>
                      </div>

                  </div>
              }
              else if (isError) {
                  return <div className={"ball-pulse-sync"}>{msg}</div>
              }
              else {
              //这里是children
                  return <div>  {this.props.children}</div>
              }
          };
            return <div className={"page"}>
          		// 注意这里------------------------------------------------  
             <Content/>
              // 这里的内容是由Content 生成的
             // 里面的props.children 由 if  else来判断生成 
              //造成问题的根源
            </div>


class  AddVipCardHome extends React.Component<{briefStadiumInfo:StadiumBriefInfoDataType},InterfaceState>{
    constructor(props:any){
        super(props);
         this.handleChange = this.handleChange.bind(this);

        this.state={
            value:""
        }
}

    handleChange(event:any) {
        this.setState({value: event.target.value});
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    
        var value = this.state.value;
    
        return  <Pager>
       //  这里请注意了  是通过onChange来获取输入的值的  ，每次都是setState造成 这个组件render（）重新执行了 ，
       // render执行后,由于Pager的Content 重新计算if else 产生了一个新的<div>  {this.props.children}</div> 导致整个子组件的input框失去焦点
           <input type="text" key={"authcode"} value={value} onChange={this.handleChange} placeholder={'请输入验证码'}/>
 			</Pager>