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

如下所示，我们拆分两个组件，我们点击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 (