1回答

好帮手慕久久

2021-07-07

同学你好，实现思路是对的。按照同学的描述，老师简单还原了一下你的代码，将事件绑定在ul上，可以触发事件。代码如下：

index.js：

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import "./style.css";

class App extends Component {

    constructor(props) {

        super(props);

        this.state={

           searchResult:[],

           onSearch:false

        }

    }

    // 将输入的内容，当成搜索结果

    handleDisplayResult(e){

     let list=this.state.searchResult;

     list.push(e.target.value)

     setTimeout(()=>{

        this.setState({

            searchResult:list,

            onSearch:true

         })

     },1000)

    }

    // 点击ul的时候，能触发事件，并拿到id

    handleClick(e){

        console.log("跳转页面,id是：",e.target.getAttribute("data-index"));

    }

    render() {

        const {searchResult}=this.state

        return (

            <div>

              <input placeholder="请输入内容" onKeyUp={(e)=>this.handleDisplayResult(e)}/>

              <ul className={this.state.onSearch?"show":"hide"} onClick={(e)=>this.handleClick(e)}>

                  {

                      searchResult.map((item,index)=>(<li data-index={index} key={index}>{item}</li>))

                  }

              </ul>

            </div>

        )

    }

}

ReactDOM.render(

    <App />,

    document.getElementById('root')

);

style.css：

.hide{

  display: none;

}

.show{

  display: block;

}

效果如下：

​

建议同学参考老师的示例，对照一下自己的代码，看哪里写的不合适。

祝学习愉快！

0