React 供应商选择组件 - 使用Ant Design渲染Select并与父组件Form同步数据

1、安装Ant Design的相关依赖:

shell 复制代码
npm install antd @ant-design/icons

2、编写SupplierSelect组件的代码如下:

javascript 复制代码
import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import axios from 'axios';

const { Option } = Select;

const SupplierSelect = ({ value, onChange }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('https://api.example.com/suppliers');
      setData(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleChange = (selectedValue) => {
    onChange(selectedValue);
  };

  return (
    <Select
      value={value}
      onChange={handleChange}
      style={{ width: '100%' }}
      placeholder="Select a supplier"
    >
      {data.map((item) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
};

export default SupplierSelect;

3、在父组件中,可以使用SupplierSelect组件并与Form同步数据

javascript 复制代码
import React, { useState } from 'react';
import { Form, Button } from 'antd';
import SupplierSelect from './SupplierSelect';

const MyForm = () => {
  const [form] = Form.useForm();
  const [selectedSupplier, setSelectedSupplier] = useState(null);

  const onFinish = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item label="Supplier" name="supplier">
        <SupplierSelect value={selectedSupplier} onChange={setSelectedSupplier} />
      </Form.Item>
      
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

这样,可以在父组件中使用SupplierSelect组件,并将其与Form同步数据。通过调用setSelectedSupplier函数来更新父组件中selectedSupplier的值,从而保持数据的同步性。

相关推荐
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github