Form表单的Select搜索框如何获取接口数据并渲染页面

最新推荐文章于 2024-08-08 07:24:14 发布

码小白的求学之路

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： react Form Select base64位解码图片表情包

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/116136139

版权

我做的这个是企业微信上的（聊天消息）类型搜索

想要实现搜索内容并渲染页面，必须得给后端返回一个类型的字段，（你可以问一下你们后端要的是什么字段）我这里是msg_type这个字段

当然渲染接口是已经取好了的，这个搜索框不用再重复取

这个是子页面，用来渲染聊天的页面，

@ item - 是通过父页面传过来的

@ conntentType - 也是从父页面传过来的，就是为了左侧的是个接口的，也是为了方便区分，如果你的接口就一个的话，你可以把这个函数直接换成接口函数就好，并且传值给后端

@ values为什么要展开？你看到这里可能会有疑问！
因为我把类型设置成多选了，不然的话，它到时候会给后端传成一个合在一起的字符串啦！！而且你输出value的时候会看到value不止一个字段！
@ typeArr 就是另外放的函数，，放在了别的组件了，，，最下面会看到

  import {
    renderContent, typeArr } from './data';

  formRef = React.createRef();
  
  // 类型选择   -查询
  onGenderChange = (values) => {
   
    const {
    groupsCusName, id } = this.props;
    // console.log(values.msg_type,2);
    conntentType ({
    id }, 1, 15, {
    ...values, msg_type: values.msg_type ? values.msg_type.join(',') : undefined })
  };
  // 重置
  resetType = () => {
   
    const {
    groupsCusName, id } = this.props;
    groupsCusName({
   id},1,15)
  }
  render(){
   
   return（
    <Form
      ref={
   this.formRef}
      onFinish={
   
         this.onGenderChange
      }
  >
  	 <Form.Item name="msg_type" label="类型">
        <Select
         allowClear
         showSearch
         mode="tags"
         optionFilterProp="children"
         placeholder="请选择产品线"
         style={
   {
    width: '100%', v