javascript - react 选择禁用选项

coder 2024-05-07 原文

我在禁用 React Select 元素中的大型列表中的某些选项时遇到问题。我有大约 6,500 个选项加载到选择中。起初我遇到搜索功能滞后的问题，但后来我开始使用 react-select-fast-filter-options 来解决这个问题。现在的问题是我需要根据 propType“picks”禁用某些选项。这是代码:

import React, {Component} from 'react'
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import Select from 'react-virtualized-select'
import createFilterOptions from 'react-select-fast-filter-options';

let options = [];
if(typeof stockSearchStocks !== 'undefined') {
    //loads in all available options from backend by laying down a static js var
    options = stockSearchStocks
}
const filterOptions =  createFilterOptions({options});

class StockSearch extends Component {
    static propTypes = {
        exchanges: PropTypes.array.isRequired,
        onSelectChange: PropTypes.func.isRequired,
        searchDisabled: PropTypes.bool.isRequired,
        picks: PropTypes.array.isRequired,
        stock_edit_to_show: PropTypes.number
    }

    /**
     * Component Bridge Function
     * @param stock_id stocks id in the database
     */
    stockSearchChange = (stock_id) => {
        this.props.onSelectChange(stock_id);
    }

     //this is my current attempt to at least 
     //disable options on component mount but this doesn't seem to be working
    componentWillMount = () => {
        console.log('picks!: ' + JSON.stringify(this.props.picks));
        let pickIDs = this.props.picks.map((p) => p.stock_id);
        options = options.map((o) => {
            // console.log(pickIDs.indexOf(o.value));
            if(pickIDs.indexOf(o.value)) {
                // console.log('here is the option: ' + JSON.stringify(o));
                // console.log('here is the option: ' + o.disabled);
                o.disabled = true;
            }
        })

    }

    /**
     * handles selected option from the stock select
     * @param selectedOption
     */
    handleSelect = (selectedOption) => {
        this.stockSearchChange(selectedOption.value);
    }

    render() {
        return (
            <div className="stock-search-container">
                <Select
                    name="stock-search"
                    options={options}
                    placeholder="Type or select a stock here..."
                    onChange={this.handleSelect}
                    disabled={this.props.searchDisabled}
                    value={this.props.stock_edit_to_show}
                    filterOptions={filterOptions}
                />
            </div>
        )
    }
}

export default StockSearch;

我已经尝试过滤 picks Prop 并更改该选项变量以包含 disabled:true 但这滞后于应用程序，我不确定现在我正在使用 react 是否可行-select-fast-filter-options 因为它似乎在做某种索引。有没有办法通过 options var 过滤以找到 picks 属性的所有实例并快速禁用这些选项？

最佳答案

isDisabled={this.props.disabled}

你传递了一个错误的 Prop 。对于 v2， Prop 是禁用的。

https://github.com/JedWatson/react-select/issues/145

关于javascript - react 选择禁用选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48789307/

有关javascript - react 选择禁用选项的更多相关文章

ruby - 默认情况下使选项为 false - 2
这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb
ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
ruby - Rails 3 的 RGB 颜色选择器 - 2
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。最佳答案也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2
是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。最佳答案
ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2
我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？最佳答案你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or
ruby-on-rails - 禁用设备的 :confirmable on-the-fly to batch-generate users - 2
Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation
ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？最佳答案如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2
我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？最佳答案总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试
ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2
我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

javascript - react 选择禁用选项

有关javascript - react 选择禁用选项的更多相关文章

随机推荐