javascript - 无法在网页上看到下拉菜单？

Question

嗨，我想创建一个下拉菜单，它将显示与下拉值相关的数据列表。但我无法在网页上看到下拉菜单，也没有错误，所以我无法确定我在做什么错了。所以有人求助

这是 App.js

    class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            value: "",
            display: false
        }
    }


    // show=props => {
    // const {person} = props
    // }


    handleChange = e => {

        this.setState({value: e.target.value})
    }


    componentDidMount = () => {
        axios.get('https://api.github.com/users/supreetsingh247/repos').then(res => {
            const list = res.data
            const tile = res.data
            this.setState({list, tile})
            console.log(this.state.list)
            console.log(this.state.value)
        })
    }
    render() {
      const message = this.state.value
        const handleFilter = this.state.list.filter(x => x.name.indexOf(this.state.value) !== -1)
        const  filter= this.state.list.filter(x =>  x.language ===message)
        return (
            <div> 
              {  console.log(filter)}
              {filter.map(list => <li key = {list.id}>
                {list.language} 
              <Dropdown list = {list}   />
              </li>
              )}
                <div> {
                    handleFilter.map(person => <li key={
                        person.id
                    }>
                        {
                        person.language
                    },{
                        person.name
                    }</li>)
                }
                    <input onChange={
                        this.handleChange
                    }></input>
                </div>
            </div>
        )
    }
}
export default App;

这是 dropdown.js

    class DropDown extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value:"",
            display:false
        }
        this.showDropdown = this.showDropdown.bind(this)
        this.hideDropdown = this.hideDropdown.bind(this)
    }
    handleChange = e => {

        this.setState({value: e.target.value})
    }
    showDropdown(e) {
        e.preventDefault()
        this.setState({
            display: true
        }, () => {
            document.addEventListener("click", this.hideDropdown)
        })
    }

    hideDropdown(e) { // e.preventDefault()
        this.setState({
            display: false
        }, () => {
            document.addEventListener("click", this.hideDropdown)
        })
    }

    render() {
        const message = this.state.value
        return(
            <div>
            <div onClick={this.showDropdown}> 
            language:All
        </div>
        <div >
          {/* {filter.map(files=> ( */}
        {this.state.display ? ( 
            <select value = {this.state.value} onChange={this.handleChange}>
                <option className="language_item"  value="JavaScript">javascript</option>
                <option className="language_item" value="HTML">html</option>
                <option className="language_item" value="CSS">css</option>
            </select>

        ) : (null)
    }
    {/* ))} */}
    {console.log(message)}
    <p>{message}</p>
        </div>
        </div>           
        )
    }
}
export default DropDown

标签： javascripthtmlcssreactjs