React工作33:select里面的option

简介: React工作33:select里面的option
import { Select } from 'antd';
const { Option } = Select;
function onChange(value) {
  console.log(`selected ${value}`);
}
function onBlur() {
  console.log('blur');
}
function onFocus() {
  console.log('focus');
}
function onSearch(val) {
  console.log('search:', val);
}
ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  mountNode,
);
相关文章
|
3月前
|
资源调度 前端开发 API
react select
react select
|
1月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
66 1
|
3月前
|
前端开发 API
【亮剑】在Web开发中,我们经常需要使用下拉选择框(Select)来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中,创建下拉选择框通常使用`<select>`标签。要设置占位符,可添加一个`value=""`的`<option>`标签。
69 0
|
JavaScript 前端开发 数据处理
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
|
前端开发
如何在 React 中的 Select 标签上设置占位符?
如何在 React 中的 Select 标签上设置占位符?
95 0
|
前端开发
【React工作记录七十七】React+hook+ts+ant design封装一个input和select搜索的组件
React+hook+ts+ant design封装一个input和select搜索的组件
151 0
|
前端开发 JavaScript
表单在React里的高级运用和select状态提升【高级React技术】
表单在React里的高级运用和select状态提升【高级React技术】
React+hook+ts+ant design封装一个input和select搜索的组件
React+hook+ts+ant design封装一个input和select搜索的组件
254 0
React+hook+ts+ant design封装一个input和select搜索的组件
|
前端开发
React工作18:工具学会全局搜索
React工作18:工具学会全局搜索
105 0
React工作18:工具学会全局搜索
|
前端开发
React工作16:ant design form两种验证
React工作16:ant design form两种验证
94 0
React工作16:ant design form两种验证

热门文章

最新文章