组件通信--下拉菜单案例

如下所示，我们拆分两个组件，我们点击list组件中的数据，填充到输入框中，默认list数据隐藏

 app.js文件

拆分两个组件，并分别引入两个组件

import React, { Component } from 'react';
import './App.css';
import Inp from './component/Inp';
import List from './component/List.js';



export default class App extends Component {
  constructor(){
    super()
    this.state={
      list: ['12k-15k', '15k-18k', '18k-22k', '22k-15k', '25k以上'],
      val: "",
      flag: false
    }
  }

  changeFlag = () => {
    this.setState({
        flag: !this.state.flag,
    })
}
setVal = (value) => {
  this.setState({
      val: value,
  })
  
  this.changeFlag();
}
  render() {
    let { list, val, flag } = this.state;
    return (
      <div className='app'>
       
       <Inp val={val} changeFlag={this.changeFlag}></Inp>
       <List list={list} setVal={this.setVal} flag={flag}></List>
      </div>
    )
  }
}

inp组件

inp框拆分到到子组件后，需要传递val值，【父传子】

传递点击文本框切换列表显示的函数【子传父】

import React from 'react'

export default function Inp(props) {
  return (
    <div>
        <input placeholder='你的期望薪资是多少' onClick={props.changeFlag} value={props.val} readOnly />
    </div>
  )
}

list组件

flag的值传递，控制显示隐藏 【父传子】

list数据渲染列表数据 【父传子】

点击切换列表显示事件的传递 【子传父】

import React from 'react'

export default function List(props) {
    let {list,flag}=props
  return (
    <div>
        {
                flag ?
                    (
                        <ul className='ul'>
                            {
                                list.map((item, index) => {
                                    return (
                                        <li onClick={() => props.setVal(item)} key={index}>{item}</li>
                                    )
                                })
                            }
                        </ul>
                    )
                    :
                    <></>
            }
    </div>
  )
}