react bootstrap 站点中的示例code显示了以下内容.我需要使用数组驱动选项,但我很难找到可以编译的示例.

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>

推荐答案

你可以从这两个函数开始.第一个选项将根据传递给页面的props 动态创建 Select 选项.如果它们被映射到该状态,则select将重新创建自身.

 createSelectItems() {
     let items = [];         
     for (let i = 0; i <= this.props.maxValue; i++) {             
          items.push(<option key={i} value={i}>{i}</option>);   
          //here I will be creating my options dynamically based on
          //what props are currently passed to the parent component
     }
     return items;
 }  

onDropdownSelected(e) {
    console.log("THE VAL", e.target.value);
    //here you will see the current selected value of the select input
}

然后,您将在render中使用这段代码.将函数引用传递给onChange prop,每次调用onChange时,所选对象将自动与该函数绑定.不需要手动编写选项,只需调用createSelectItems()函数,该函数将根据一些约束(可能会更改)生成并返回选项.

  <Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple>
       {this.createSelectItems()}
  </Input>

Reactjs相关问答推荐

有没有方法覆盖NextJS 14中的布局?

react 表复选框不对任何操作做出react

Tailwind不使用@apply classes构建,并强制使用类似于移动的viewport

同一文件中前端和后端的Nginx配置

在REACT-RUTER-DOMV6中使用通用页面包装组件有问题吗?

Gitlab CI和VITE环境变量出现问题

如何在我的 React 应用程序中仅显示我的 Register 组件

如何清除过滤器搜索的状态

Javascript - 正则表达式不适用于 MAC OS - 编码?

Chart.js如何go 除边框

React 无效的钩子调用:如何避免嵌套钩子?

Chakra UI:如何在选中状态下设置复选框 colored颜色

ReactJS中使用setState方法时,Context内部的State未进行更新

如何在 React 中使用 debounce hooks

添加 React/Redux 组件模板的 VS Code 扩展

React Router 6.4CreateBrowserRouter子元素不显示

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

如何在 React JS 上使文本中的单词可点击

React.js 中的页面崩溃(读取未定义的属性)

react Select 框数值作为字符串传递