- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 React Select Async 链接选项的最佳实践是什么。
我的意思是:我有 3 个下拉列表,第一个是从默认值填充的选项值,接下来的 2 个下拉列表被禁用。
选择第一个下拉值应该根据它的值填充第二个下拉选项,依此类推下一个下拉列表。
所以我一直在尝试
import React from "react";
import Select from "react-select";
import AsyncSelect from "react-select/async";
import classnames from "classnames";
import Requests from "../services/requests";
const filterOptions = (inputValue, options) => {
return options.filter(i =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
class FieldsRenderer extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: props.fields,
containerClass: props.containerClass,
stepSnapshot: null,
selectOptions: {}
};
this.props.fields.map( (f) => {
if(f.type === 'select' && typeof f.dependsOn !== 'undefined') {
this.state.selectOptions[f.name] = null;
}
})
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.fields !== prevState.fields) {
return {
fields: nextProps.fields,
containerClass: nextProps.containerClass
};
}
return null;
}
componentDidUpdate(prevProps, nextProps) {
if (prevProps !== this.props) {
this.setState({
fields: nextProps.fields,
containerClass: nextProps.containerClass
});
this.props.fields.map(f => {
if (typeof f.dependsOn != "undefined") {
this.state.selectOptions[f.name] = null;
}
});
}
}
handleInputChange = (index, e) => {
console.log(e.target.value);
console.log(index);
};
handleSelectChange = (selectedOption, item) => {
this.setState({
stepSnapshot: {
[item.name]: {
value: selectedOption.value,
label: selectedOption.label
}
}
});
let childField = this.props.fields.filter(t => {
if (t.type === "select" && typeof t.dependsOn !== "undefined") {
return t.dependsOn === item.name;
}
});
if (childField) {
this.loadChildOptions(childField[0], selectedOption);
}
};
//load child slect options
loadChildOptions(target, parentValue) {
Requests.get(
process.env.REACT_APP_API_BASE_URL +
target.source +
"/" +
parentValue.value,
(status, data) => {
//data will be set but will be shown just the previous state
this.state.selectOptions[target.name] = data;
}
);
}
render() {
let containerClass = "";
let fields = this.state.fields.map((field, i) => {
const fieldType = field.type;
let fieldStyle;
if (
typeof this.state.containerClass !== "undefined" &&
this.state.containerClass !== ""
) {
containerClass = this.state.containerClass;
}
if (typeof field.width !== "undefined" && field.width !== "") {
fieldStyle = {
width: "calc(" + field.width + " - 5px)"
};
}
switch (fieldType) {
case "select": {
const selectCustomStyles = {
control: (base, state) => ({
...base,
boxShadow: state.isFocused ? 0 : 0,
borderWidth: 2,
height: 45,
borderColor: state.isFocused ? "#707070" : base.borderColor,
"&:hover": {
borderColor: state.isFocused ? "#707070" : base.borderColor
}
}),
option: (provided, state) => ({
...provided,
backgroundColor: state.isSelected ? "#46B428" : "initial"
})
};
if (
typeof field.async !== "undefined" &&
typeof field.dependsOn === "undefined"
) {
return (
<div key={i} className={"field-wrapper"}>
<AsyncSelect
loadOptions={(inputValue, callback) => {
Requests.get(
process.env.REACT_APP_API_BASE_URL + field.source,
(status, data) => {
callback(data);
}
);
}}
styles={selectCustomStyles}
defaultOptions
name={field.name}
placeholder={field.label}
onChange={this.handleSelectChange}
/>
</div>
);
} else if(typeof field.dependsOn !== "undefined") {
return(<div key={i} className={"field-wrapper"}>
<AsyncSelect
styles={selectCustomStyles}
placeholder={field.label}
defaultOptions={this.state.selectOptions[field.name]}
loadOptions={this.state.selectOptions[field.name]}
/>
</div>)
} else {
const disabled =
typeof field.dependsOn !== "undefined" && field.dependsOn !== ""
? this.state.selectOptions[field.name] != null
? false
: true
: false;
return (
<div key={i} className={"field-wrapper"}>
<Select
styles={selectCustomStyles}
placeholder={field.label}
//isLoading={this.state.selectOptions[field.name].length ? true : false}
isDisabled={disabled}
name={field.name}
options={this.state.selectOptions[field.name]}
/>
</div>
);
}
}
case "input":
{
let suffix;
let inputAppendClass;
if (typeof field.suffix !== "undefined" && field.suffix !== "") {
inputAppendClass = "input-has-append";
suffix = <span className={"input-append"}>{field.suffix}</span>;
}
return (
<div
key={i}
className={classnames("field-wrapper input", inputAppendClass)}
style={fieldStyle}
>
<input
placeholder={field.label}
type="text"
className={"input-field"}
onChange={event => this.handleInputChange(field.name, event)}
/>
{suffix}
</div>
);
}
break;
case "checkbox":
{
containerClass = "checkbox-fields";
let radios = field.options.map((option, b) => {
return (
<div key={i + b} className={"field-wrapper checkbox-button"}>
<input
placeholder={option.label}
id={option.name + "_" + i + b}
type={"checkbox"}
className={"input-field"}
/>
<label htmlFor={option.name + "_" + i + b}>
<div className={"label-name"}>{option.label}</div>
<span className={"info-icon"}></span>
<div className={"hint"}>{option.hint}</div>
</label>
</div>
);
});
return radios;
}
break;
case "radio":
{
let radios = field.options.map((option, k) => {
return (
<div key={i + k} className={"field-wrapper radio-button"}>
<input
name={option.name}
id={option.name + "_" + i + k}
placeholder={option.label}
type={"radio"}
className={"input-field"}
/>
<label htmlFor={option.name + "_" + i + k}>
<div className={"label-name"}>{option.label}</div>
<div className={"hint"}>{option.hint}</div>
</label>
</div>
);
});
return radios;
}
break;
default:
break;
}
});
return (
<div className={classnames("fields-group", containerClass)}>{fields}</div>
);
}
}
export default FieldsRenderer;
最佳答案
例如我有 react-select
异步字段。我用于管理表单 formik
.首先创建字段:
<AsyncSelect
name="first"
...
onChange={(name, value) => {
// you can write what you want but here small example what I do for other
// two fields
setFieldValue('second', null);
setFieldValue('third', null);
return setFieldValue(name, value);
}}
/>
second
field :
<AsyncSelect
name="second"
key={!!values.first && !!values.first.id ? values.first.id : null}
...
onChange={(name, value) => {
setFieldValue('third', null);
return setFieldValue(name, value);
}}
/>
key
并更改
key
更改第一个字段的值。因为如果你不这样做
second
场不知道什么时候
first
字段更改值。如果你给 uniq 可变
key
第二个可以从依赖于
first
的远程数据加载 field 。
third
field :
<AsyncSelect
name="third"
key={!!values.third && !!values.third.id ? values.third.id : null}
...
onChange={setFieldValue}
/>
关于option - 根据另一个下拉选择的值 react 选择链式选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60936093/
给定一个 Option[Future[Option[Int]]] : scala> val x: Option[Future[Option[Int]]] = Some ( Future ( Some
如果我理解正确,EitherT[Option,A,B] 应该与 Option[Either[A,B]] 相同,但编译器不同意.以下代码编译失败: def f[A,B] = implicitly[Eit
我刚开始在使用 parcel.js 构建静态 Assets 时遇到此错误。它在本地工作,但我在 Heroku 上的构建出错,我不确定它是否相关。 最佳答案 得到同样的问题。通过将 core-js 安装
当我生成 Telerik Report 时,只有 Export PDF 可用。即使我将 docx 和 xlsx 的配置设置为 true。这是我在网络配置中的配置。
我的 iTunesConnect 应用程序显示 Apple Pay 选项。我正在使用布伦特里。 即使我们没有在应用程序中使用 Apple Pay 功能。 有人可以帮我解决如何在我的 itunesCon
我正在 Raspbian 中从命令行运行以下查询: mysql -u $NAME -p $PASS Tweets -e "SELECT count(*) FROM raw_tweets;" 它输出以下
我正在尝试使用 ffmpeg(在 linux 下)为视频添加一个小标题。所以,我使用: ffmpeg -i hk.avi -r 30000/1001 -metadata title="SOF" hk_
我正在尝试使用 ffmpeg 使用 ffserver 流式传输视频。您将在 ffserver1.conf 文件下方找到 ffmpeg 命令的日志输出。 其中一个错误引用了预设,每次我尝试使用预设时,我
我正在尝试对 Option 使用 fold 或 map 操作而不是 match。 我有一个选项 val ao: Option[String] = xxxx 和一个函数 f: (String => Fu
Dockerfile documentation表示有可能通过 --platform FROM 中的选项像这样的指令: FROM [--platform=] [AS ] 在我的 dockerfile
我不确定“属性(property)”或“选项”是否是正确的术语,但这是我需要弄清楚的。 鉴于以下情况: ' $.fileup({ url: '/file/upload',
我正在尝试使用 jQuery 检查是否选择了值 = 1 的选择选项,然后将类添加到某些元素。但有些东西不起作用。可以请人看一下代码吗? 我的代码: Reservation
我对 VIM 中的这些感到困惑。有些事情需要设置,而另一些则让。 而且,我如何检查某个选项。我知道这是一个选项,因为我使用 set 来更改它。 例如,如何检查当前文件类型选项是否为 java? 最佳答
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我在看《Professional F# 2.0》一书作者展示如下代码 let a string : option = None if a.IsNone then System.Console.
我习惯使用方法顶部的 java 样板检查输入参数: public static Boolean filesExist(String file1, String file2, String file3
假设我有一串 "Insert Post -title Some PostTitle -category 2 -date-posted 2013-02:02 10:10:10" 我一直在尝试做的是将这个
从 1.3.70 EAP 开始,在 org.jetbrains.kotlin.gradle.dsl.KotlinJvmOptions 这是 var useIR: kotlin.Boolean 哪个激活
我无法获取订购捆绑商品的所有子产品及其选项。这可能吗? 最佳答案 以下是您如何找出哪些产品应与所有其他项目一起附加到列表中的捆绑产品中的方法: foreach ($order->getAllItems
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
我是一名优秀的程序员,十分优秀!