条件API调用并在react-select中发送数据

2024-01-19

import React, { Component} from 'react';  
import Select from 'react-select';  
import 'react-select/dist/react-select.css';

const partsType = [
    {value: 'front_parts', label: 'Part Condition-Front'},
    {value: 'left_parts', label: 'Part Condition-Left'},
    {value: 'back_parts', label: 'Part Condition-Back'},
    {value: 'right_parts', label: 'Part Condition-Right'},
    {value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'},
    {value: 'glass', label: 'Glass Condition'},
    {value: 'electrical_parts', label: 'Electrical Parts'},
    {value: 'non_electrical_parts', label: 'Non-Electrical Parts'}
];

const getParts = () => {
    return fetch(
      "http://localhost:4000/left_parts",
      {
          method: 'get'
      }
    )
      .then(response => {
          if(response.status >= 400) {
              throw new Error("error");
          }
          return response.json()
      })
      .then(parts => {
          let partsName = [];
          for(let part of parts) {
              partsName.push({value: part.promptCode, label: part.text})
          }
          return {options: partsName};
      })
      .catch(err => {
          console.log('could not fetch parts');
          console.log(err);
          return {options: []}
      })
};

class Assess extends Component {

    constructor(props) {
        super(props);
        this.state = {
            partsType:'front_parts'        
    };

    this.handlePartsType = this.handlePartsType.bind(this);

    handlePartsType = (item) => {
        this.setState({
            partsType: item.value
        });
    };

    render() {
        return (
            <div>
                <Select
                    clearable={false}
                    searchable={false}
                    value={this.state.partsType}
                    options={partsType}
                    onChange={this.handlePartsType}
                />

                <Select.Async
                    clearable={false}
                    searchable={false}
                    name="PartNamePolygon"
                    value={this.state.PartNamePolygon}
                    onChange={this.PartNamePolygonSelect}
                    loadOptions={getParts}
                />
            </div>
        );
    }
}

我已经提供了片段。我现在正在做的是我做了两个下拉菜单,并且使用第一个下拉菜单的第二个下拉菜单的数据将被更改。现在我不知道如何根据 this.state.partsType 调用不同的 API,因为根据其状态值,其值将在“getParts”中传递。如何实现这一目标?将其值传递给它,以便调用不同的 API


尝试这样

import React, { Component} from 'react';  
        import Select from 'react-select';  
        import 'react-select/dist/react-select.css';

        const partsType = [
            {value: 'front_parts', label: 'Part Condition-Front'},
            {value: 'left_parts', label: 'Part Condition-Left'},
            {value: 'back_parts', label: 'Part Condition-Back'},
            {value: 'right_parts', label: 'Part Condition-Right'},
            {value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'},
            {value: 'glass', label: 'Glass Condition'},
            {value: 'electrical_parts', label: 'Electrical Parts'},
            {value: 'non_electrical_parts', label: 'Non-Electrical Parts'}
        ];

        const getParts = (type) => {
            return fetch(
              `http://localhost:4000/${type}`,
              {
                  method: 'get'
              }
            )
              .then(response => {
                  if(response.status >= 400){
                  throw new Error("error");
                  }
                  return response.json()
              })
              .then(parts => {
                  let partsName = [];


                  for(let part of parts) {
                  partsName.push({value: part.promptCode, label: part.text})
                  }


                  return {options: partsName};
              })
              .catch(err => {
                  console.log('could not fetch parts');
                  console.log(err);
                  return {options: []}
              })

        };

        class Assess extends Component {

            constructor(props){
            super(props);
            this.state = {
                partsType:'front_parts'

            };

        this.handlePartsType = this.handlePartsType.bind(this);

        handlePartsType = (item) => {
              this.setState({
                  partsType: item.value
              }, getParts(item.value));

              };

        render() {

            return (
            <div>
            <Select
            clearable={false}
            searchable={false}
            value={this.state.partsType}
            options={partsType}
            onChange={this.handlePartsType}
            />

        <Select.Async
                                  clearable={false}
                                  searchable={false}
                                  name="PartNamePolygon"
                                  value={this.state.PartNamePolygon}
                                  onChange={this.PartNamePolygonSelect}
                                  loadOptions={getParts}
                                />

        </div>
            );
          }
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

条件API调用并在react-select中发送数据 的相关文章

  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐