React+antd 搜索栏

搜索框与state一个值双向绑定
<Input
 name='username'  // 为输入框添加一个name值
placeholder="商品名" 
style={{ width: '300px', float: 'left' }} 
onChange={this.selectNanme}  // 输入框改变触发事件
/>
// 改变事件
 selectNanme = (e) => {
        this.setState({
            SelectName: e.target.value // state值=e(监视时间).target.value
        })
    }
// 点击搜索后给服务器发送请求
<Button shape="circle" 
icon={<SearchOutlined />} 
size='small' 
style={{ float: 'left', marginLeft: '10px', marginTop: '5px' }}
 onClick={this.SelectBut.bind(this)}  // 点击事件 发送请求
 />
SelectBut() {
        this.props.Txts.TxtSearch(this.state.SelectName).then((data) => {
            this.setState({
                TxtList:data.data.data, // 改变显示表格的值
                Count:data.data.count // 改变页码总条数
            })
        })
    } 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。