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