条件 API 调用并在 react-select 中发送数据 [英] Conditional API call and send data in react-select
本文介绍了条件 API 调用并在 react-select 中发送数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
import React, { Component} from 'react';导入从反应选择"中选择;导入 'react-select/dist/react-select.css';const 部分类型 = [{value: 'front_parts', label: 'Part Condition-Front'},{value: 'left_parts', label: 'Part Condition-Left'},{value: 'back_parts', 标签: 'Part Condition-Back'},{value: 'right_parts', label: 'Part Condition-Right'},{value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'},{值:'玻璃',标签:'玻璃状态'},{value: 'electrical_parts', label: 'Electrical Parts'},{值:'non_electrical_parts',标签:'非电气部件'}];const getParts = () =>{返回获取("http://localhost:4000/left_parts",{方法:'获取'}).then(响应 => {如果(响应.状态> = 400){抛出新错误(错误");}返回 response.json()}).then(部分 => {让零件名称 = [];for(让部分零件){partName.push({value: part.promptCode, label: part.text})}返回{选项:部件名称};}).catch(错误 => {console.log('无法获取零件');控制台日志(错误);返回{选项:[]}})};类评估扩展组件{构造函数(道具){超级(道具);this.state = {零件类型:'front_parts'};this.handlePartsType = this.handlePartsType.bind(this);handlePartsType = (item) =>{this.setState({零件类型:item.value});};使成为() {返回 (<div><选择可清除={假}可搜索={假}值={this.state.partsType}选项={partsType}onChange={this.handlePartsType}/><选择.异步可清除={假}可搜索={假}名称="零件名称多边形"值={this.state.PartNamePolygon}onChange={this.PartNamePolygonSelect}loadOptions={getParts}/>
);}}
我已经提供了代码片段.我现在正在做的是我做了两个下拉,使用第二个的第一个下拉数据将被更改.现在我不知道如何根据 this.state.partsType 调用不同的 API,因为根据它的状态值,它的值将在getParts"中传递.如何做到这一点?将其值传递给它,以便调用不同的 API
解决方案
试试这个
import React, { Component} from 'react';导入从反应选择"中选择;导入 'react-select/dist/react-select.css';const 部分类型 = [{value: 'front_parts', label: 'Part Condition-Front'},{value: 'left_parts', label: 'Part Condition-Left'},{value: 'back_parts', 标签: 'Part Condition-Back'},{value: 'right_parts', label: 'Part Condition-Right'},{value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'},{值:'玻璃',标签:'玻璃状态'},{value: 'electrical_parts', label: 'Electrical Parts'},{值:'non_electrical_parts',标签:'非电气部件'}];const getParts = (类型) =>{返回获取(`http://localhost:4000/${type}`,{方法:'获取'}).then(响应 => {如果(响应.状态> = 400){抛出新错误(错误");}返回 response.json()}).then(部分 => {让零件名称 = [];for(让部分零件){partName.push({value: part.promptCode, label: part.text})}返回{选项:部件名称};}).catch(错误 => {console.log('无法获取零件');控制台日志(错误);返回{选项:[]}})};类评估扩展组件{构造函数(道具){超级(道具);this.state = {零件类型:'front_parts'};this.handlePartsType = this.handlePartsType.bind(this);handlePartsType = (item) =>{this.setState({零件类型:item.value}, getParts(item.value));};使成为() {返回 (<div><选择可清除={假}可搜索={假}值={this.state.partsType}选项={partsType}onChange={this.handlePartsType}/><选择.异步可清除={假}可搜索={假}名称="零件名称多边形"值={this.state.PartNamePolygon}onChange={this.PartNamePolygonSelect}loadOptions={getParts}/>
);}}
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>
);
}
}
I had provided the snippet. what i'm doing now is i had made two drop down and using first drop down data of second one will be changed. Now in that i am not getting how to call different API according to this.state.partsType because according to its state value, its value will be passed in "getParts". How to achieve that ? to pass the its value to it so that different API will be called
解决方案
try like this
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>
);
}
}
这篇关于条件 API 调用并在 react-select 中发送数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文