首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

根据来自Gutenberg Block中另一个SelectControl的输入过滤SelectControl条目(ES5,没有JSX)

根据来自Gutenberg Block中另一个SelectControl的输入过滤SelectControl条目,您可以使用以下方法来实现:

  1. 获取输入过滤的值: 在SelectControl的onChange事件中,获取另一个SelectControl的输入值,可以使用event.target.value来获取该值。
  2. 进行过滤操作: 通过比较输入值和SelectControl中的每个条目,筛选出符合条件的条目。可以使用Array的filter方法来实现,遍历SelectControl的条目数组,对每个条目进行筛选。筛选条件可以使用字符串的indexOf方法,判断条目的值是否包含输入值。
  3. 更新SelectControl的选项: 通过setState方法更新SelectControl的选项数组,将筛选后的条目数组传递给SelectControl的options属性。

下面是一个示例代码,演示如何实现根据另一个SelectControl的输入值过滤SelectControl的条目:

代码语言:txt
复制
// 导入必要的库和组件
import { SelectControl } from '@wordpress/components';
import { Component } from '@wordpress/element';

class MyBlock extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      // 初始化选项数组
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      // 输入过滤的值
      inputValue: '',
    };
  }
  
  // SelectControl的onChange事件处理函数
  handleSelectChange(value) {
    // 更新输入过滤的值
    this.setState({ inputValue: value });
  }
  
  render() {
    const { options, inputValue } = this.state;
    
    // 根据输入值过滤条目
    const filteredOptions = options.filter(option =>
      option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
    );
    
    return (
      <div>
        {/* 另一个SelectControl,用于输入过滤值 */}
        <SelectControl
          label="输入过滤值"
          value={inputValue}
          onChange={this.handleSelectChange}
        />
        
        {/* 被过滤的SelectControl */}
        <SelectControl
          label="过滤后的条目"
          options={filteredOptions}
        />
      </div>
    );
  }
}

在这个示例代码中,我们通过两个SelectControl组件来实现根据一个SelectControl的输入值来过滤另一个SelectControl的条目。通过onChange事件获取输入值,并在render函数中根据输入值进行过滤操作,更新被过滤SelectControl的选项。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

《101 Windows Phone 7 Apps》读书笔记-BOOK READER

字体来自Gutenberg项目(www.gutenberg.org),由于其版权已经过期,因此它为美国人民提供了免费电子书。...➔ 如图25.2所示充满章节list box,使用了一种非常重要但很难发现方法,使得list box条目按照其宽度进行拉伸,填满该区域。...ComboBox是一个核心Silverlight控件,它频繁地使用在网页,但是,它没有为Windows Phone提供合适设计风格。所以它一般不会被使用(该控件应该移除来避免困惑)。...基于计算得到换页地点和换行地点,该控件为每一行文字增加一个text block来得到所有的页面。 注意: ➔ 换行与换页索引分别存储在各自列表。...➔ 本控件对于输入文本有一些假设,工程包含《傲慢与偏见》文档经过了预处理,使得下面的假设成立: 1.

1.2K60

从Rust到远方:PHP星系

它允许根据已经编译好php二进制文件编译扩展,这正好完美的满足了我们需求!...字符串值在input,字符串长度在input_len。下一步是解析输入。(不需要字符串长度)。这就是我们要调用Rust代码地方!...const Vector_Node nodes = parse_result.ok._0; Result类型和parse函数来自Rust。如果你不记得这些类型,请阅读前一集关于C星系内容。...它只是一个有指针和长度结构。指针指向原始输入字符串,因此没有副本(实际上这是Slice定义)。Zend Engine有一个ZVAL_STRINGL宏,它允许从指针和长度创建字符串,太棒了!...提速中位数是941。另一个大问题是PEG解析器由于内存限制无法处理许多个Gutenberg文档。当然,增大内存大小是可能,但并不理想。

1.1K40
  • 从Rust到远方:C星系

    因为像PHP或Python这样语言都是用C语言编写,在我们特定Gutenberg解析器用例,这意味着解析器可以被PHP或Python直接嵌入和使用,几乎没有开销。非常整洁! Rust ?...namespace 和 name成员原来在Rust是一个元组。因为在元组在cbindgen里面没有对应类型,因此我们这里用两个成员来代替。...Rust出色地方体现在:没拷贝,没克隆,没有混乱内存,只有指向数据指针会返回给C语言当作slices和数组。 工作流如下: C里面第一件事情:检查指针不为空, 基于这个指针用CStr重建输入。...%.s形式允许根据字符串长度和指针打印字符串。...我没有运行基准测试来验证这个声明,它纯粹是理论上。它可以作为下一篇文章主题! 现在我们已经成功地将Rust嵌入到C,一个全新世界向我们打开了!

    1.3K20

    Fiddler请求过滤

    Hide the following Hosts:表示在输入输入了哪些域名信息,就不过滤,不进行监听。...如:选中此项,在输入输入www.baidu.com时,只有在访问www.baidu.com请求才会进行监听,即左侧sessson只包含www.baidu.com请求,其他请求将不会监听显示...Flag the following Hosts:表示在输入输入了哪些域名信息,在左侧session面板,这些配置域名在监听到时,会加标识(如:加粗)如:选中此项,在输入输入www.baidu.com...Exporer traffic:只显示来自IE请求 Hide trafficfrom service host:隐藏来自service host请求 为防止和Hosts过滤器有所冲突,注意先将Hosts...KB:隐藏大于指定大小请求; Time HeatMap:获得即时数据(绿色阴影代表响应时间在50毫秒以内;超过50毫秒但在300毫秒之内响应条目没有颜色;响应时间在300至500毫秒之间会涂以黄色

    3.8K11

    展望 WordPress 5.0 会给我们带来哪些更新?

    所有的网页内容都被模块化,你只需要根据提示加入你想要 block 就可以了。...至此,我相信读者已经发现古腾堡一个特点,那就是操作都是围绕块(Block)进行,这也是新版编辑器一个理念。...两步验证(Two Factor Authentication)指的是用户登录账户时候,除了要输入用户名和密码,还要求用户输入一个随机生成发送到手机动态密码,为帐户额外添加了一层保护,即使入侵者窃取了用户密码...由 Matt Mullenweg 创立 WooCommerce 已经实现了 Woo 插件和插件自动更新。 在未来 WordPress 版本,我们可能会看到更多基于 SaaS 解决方案。...综上所述, WordPress 5.0 还是很值得让人期待呀!可惜依旧没有明月期盼已久官方原生 MarkDown 语法支持,唉!

    1.4K30

    从Rust到远方:WebAssembly 星系

    对于Gutenberg Rust解析器,我没有使用像wasm-bindgen这样工具(这是一个纯粹gem),因为在几个月前开始这个项目的时候我遇到了一些限制。请注意,其中一些已经被解决了!...我想要提醒读者GutenbergRust解析器开放了一个AST以及一个root函数(语法根),相应定义如下 pub enum Node { Block { name...通用设计 下面是我们通用设计或者说流程: Javascript将博客内容解析为WebAssembly模块内存 传入这个内存指针以及博客长度来调用root函数 Rust从内存读到博客内容,运行Gutenberg...它是根据一个指针和其长度得到内存。output变量是会被作为返回值字节序列。gutenberg_post_parser::root(input)开始运行解析器。...Javascript和NodeJS版本有下面的一些差异: 在NodeJS没有Fetch API,因此WebAssembly二进制文件只能通过buffer直接实例化,像这样:WebAssembly.instantiate

    1.5K20

    React全家桶简介

    但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分简单明了。这里简单讲下JSX由来。...小程序WXS,也可以看作是一种语法糖,但是一种尚未成熟语法糖。ES6箭头函数在JS也是语法糖,Bable可以将它自动转化为同等ES5语法。...在Html对DOM进行更新操作十分昂贵,为减少对于真实DOM操作,诞生了Virtual DOM概念,也就是用javascript把真实DOM树描述了一遍,使用也就是我们刚刚说过JSX语法。...如果一个 model 变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 变化。Redux就是为了解决这个复杂场景而设计。...组件 MyComponent 子节点有一个文本输入框,用于获取用户输入

    2K10

    8个用于设计漂亮表格WordPress插件

    WordPress最新版Gutenberg编辑器已经有了表格“块”功能。你可以在这里在线体验一下:https://wordpress.org/gutenberg/。可以快速插入一个简单表格。...Gutenberg表格工具 除此之外,你还在WordPress手写代码进行插入表格操作: ?...,它包括15个TinyMCE插件,可根据您选择按钮自动启用或禁用,其中也包括创建表格功能。...Pricing Table by Supsystic 如果您喜欢Data Tables Generator插件简单性和易用性,但需要更突出显示定价表,Supsystic另一个插件将会有帮助。...这个定价表插件可以通过拖拽来构建响应式并排比较定价表。 TablePress 这是一个很棒WordPress表格插件,可以导入数据,手动输入,也很易于使用。

    4.9K20

    Cytoscape插件6:CluoGO+Cluepedia

    一个可选择冗余减少特征(融合)以父子关系条目评估GO条目,这会共享相似的相关基因并且保留代表性父或子条目。选择条目关系根据他们共享基因定义。...以in我这个条目条目矩阵有来源,kappa统计就成了最适合方法。最后,产生网络用node代表条目,这个条目已经根据kappa得分进行了预先设定。...最后groups被固定并且随机颜色。功能groups代表重要条目,可以可视化,并且可以看出他们之间关系。选择组领头条目,基于提供每个termgene百分比。...当比较2个基因聚类时,cluege另一个原始功能可以调整可视化,除了网络,cluego提供总括表,可以显示组别和他领头条目,直方图,聚类和普通条目像bingo,cluego可以和golorize合并产生记忆...过滤方法是基于表达水平,标准差和缺失值。另外一个特征是允许抽取表达数据子集,这些子集相应于一个pathway或term。 网络可以根据最高相互得分富集,可以对所有也可以对选定nodes。

    4K30

    【TS 演化史 -- 17】各文件JSX工厂 、有条件类型和映射类型修饰符

    因此,包含JSX脚本或模块不能直接在浏览器运行。与带有类型注释文件一样,JSX 文件首先需要编译成纯 JS 文件。...这样它就可以应用于项目中所有JSX文件: { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution...有条件类型 TypeScript 2.8 引入了有条件类型,这是类型系统强大而令人兴奋补充。 有条件类型使咱们可以表达非均匀类型映射,即,根据条件而不同类型转换。...有条件类型类型推断 有条件类型支持另一个有用特性是使用新infer关键字推断类型变量。...type D = Extract; // never NonNullable 咱们上面使用了NonNullable类型,该类型从T过滤

    2.5K20

    niRvana · 轻拟物主题4.8完美版

    每个人都有自己审美,虽然作为一个主后端开发,但对于这种轻盈、简洁,带有真实物体质感新拟物设计风格没有了抵抗力, 是时候从极致扁平稍微向新拟物风格致敬了 !...无须任何贴图,这也是相对极致拟物风格一个巨大突破 主色调识别 自动根据文章特色图片识别出图片主色调,在首页、文章分类页用最美的方式显示滚动图片。...如: Gutenberg专用模块 niRvana主题除了外观变化以外,主要还是针对WordPress5做了大量优化:由于WordPress5.0引入了“Gutenberg Block...Editor”(区块编辑器),在这种编辑器下,原有的“短代码”就显得非常落后了: 短代码存在问题:在旧TinyMCE编辑器,短代码往往需要手动输入和编辑,很难记忆和使用。...title也可以跟随变化了 2、Gutenberg Block根据官方设计要求,主要内容编辑应该移至编辑区域而非设置区域 3、全站不刷新加载页面开启后,popover浮动气泡、全屏搜索,在一些特定操作下

    8.6K10

    了不起 tsconfig.json 指南

    指定需要编译目录 在不指定输入文件情况下执行 tsc 命令,默认从当前目录开始编译,编译所有 .ts 文件,并且从当前目录开始查找 tsconfig.json 文件,并逐级向上级目录搜索。...", "ES2019.Array"], // TS需要引用库,即声明文件,es5 默认引用dom、es5、scripthost,如需要使用es高级版本特性,通常都需要配置,如es8数组新特性需要引入...配置复用 通过 extends 属性实现配置复用,即一个配置文件可以继承另一个文件配置属性。...这是因为 this 隐式具有 any 类型,如果没有指定类型注解,编译器会提示“"this" 隐式具有类型 "any",因为它没有类型注释。”。.../dist/", "noImplicitAny": true, + "module": "es6", + "target": "es5", + "jsx": "react",

    2.9K10
    领券