根据反应中另一个选择框的值动态加载选择框的选项

2023-11-29

我正在尝试创建 2 个选择框,其中第一个选择框的选项是固定的,但第二个选择框的选项根据第一个 div 的选定值而变化。

例如: 第一个选择:

<select>
    <option>Integers</option>
    <option>Alphabets</option>
</select>

然后,如果在第一个选择中选择“整数”,那么我希望在第二个选择框中选择整数 1 到 10 作为选项。但如果选择字母,a 到 z 应该出现在第二个选择框的选项中。


您可以创建一个查找表对象,其中包含整数和字母,每个对象都有一个相关的键。
然后在一个select您用所选更新状态key而在另一个select您渲染与所选相对应的选项key.


Here is a running example:

const lookup = {
  "int": [
    { id: '1', text: '1' },
    { id: '2', text: '2' },
    { id: '3', text: '3' },
    { id: '4', text: '4' },
    { id: '5', text: '5' }
  ],
  "abc": [
    { id: 'a', text: 'a' },
    { id: 'b', text: 'b' },
    { id: 'c', text: 'c' },
    { id: 'd', text: 'd' },
    { id: 'e', text: 'e' }
  ]
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataValue: 'int'
    }
  }

  onChange = ({ target: { value } }) => {
    this.setState({ dataValue: value });
  }

  render() {
    const { dataValue } = this.state;
    const options = lookup[dataValue];
    return (
      <div>
        <select onChange={this.onChange}>
          <option value="int">Integers</option>
          <option value="abc">Alphabets</option>
        </select>
        <hr />
        <select>
          {options.map(o => <option key={o.id} value={o.id}>{o.text}</option>)}
        </select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

根据反应中另一个选择框的值动态加载选择框的选项 的相关文章

  • 玩笑错误反应组件上出现意外标记

    我收到了意外的令牌React Component Name在跑步的时候npm test 尝试阅读其他几个类似的问题 但似乎没有一个对我有用 我在下面添加了 babelrc package json 和我的测试文件内容的内容 presets
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 无法使用python和beautifulsoup抓取网页中的某些href

    我目前正在使用 Python 3 4 和 bs4 爬取网页 以收集塞尔维亚在里约 2016 年的比赛结果 所以网址here http rio2016 fivb com en volleyball women teams srb serbia
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use
  • 通过按 Enter 键提交表单而不使用提交按钮

    好吧 我试图通过按 Enter 键来提交表单 但不显示提交按钮 如果可能的话 我不想涉足 JavaScript 因为我希望一切都能在所有浏览器上运行 我知道的唯一 JS 方式是使用事件 现在的表格看起来像这样
  • 单击表格行可显示更多信息

    我正在尝试使用 jQuery 来实现以下目标 当单击一个表格行时 会显示表格行内的 info div 如果单击另一个表格行 则当前显示的任何其他 info 元素将被隐藏 并根据表格行显示新的 info div已被点击 这个问题是 代码无法正
  • 如何使用CSS缩进多级select optgroup?

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op
  • CRA 的 src 之外的测试文件夹?

    我为我创建的应用程序编写测试npx create react app template typescript但我不知道如何将测试文件保存在组件旁边或单独的文件夹中test 我想我应该创造test文件夹外src src App tsx etc
  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum
  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操
  • 如何在反应组件中使用聚合物组件?是否可以?

    我已经使用谷歌的聚合物来制作网络组件 但我也很有兴趣尝试一下 React 所以我想知道是否可以从反应组件的渲染函数内部使用聚合物组件 对的 这是可能的 我使用的方法有点复杂 但我很乐意分享 如果您已经使用过聚合物 则只需像使用任何其他聚合物
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • 为什么无论状态是对象还是字符串,React 重新渲染的方式都不同?

    下面的反应示例 userProfile状态是一个object 第一次渲染 状态是 第二次渲染 状态是res data gt 无限重新渲染 If userProfile更改为string e g useState with setUserPr
  • 全高全宽 CSS 布局

    我正在寻找一种方法来创建具有 5 个区域的纯 CSS 无 JavaScript 布局 如下所示 H A B C F
  • 从 Context Provider 重定向 React Router

    我是 React Router 的新手 并尝试使用新的 Conext API 从提供程序内部进行重定向 基本上我的提供者看起来像这样 AuthContext js class AuthProvider extends React Compo
  • 在反应中访问回调内的 event.target

    我有以下课程片段 constructor props super props this timeout null search e gt clearTimeout this timeout this timeout setTimeout f
  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • 如何在 React Native 中使用相同的 Firebase 数据库在两个应用程序之间进行通信?

    我有两个不同的应用程序使用相同的实时数据库 在第一个应用程序中 我发送的订单包含一些要保存在数据库中的数据字段 在另一个应用程序中 我只添加一个侦听器 firebase database ref userOrder currentUser

随机推荐