![PyPI Slashes Malware Response Time: 90% of Issues Resolved in Under 24 Hours](https://cdn.sanity.io/images/cgdhsj6q/production/eee3e3fc69826f43dfc3366b71472d981003a5cb-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Slashes Malware Response Time: 90% of Issues Resolved in Under 24 Hours
PyPI has drastically improved its malware response times, resolving 90% of issues in under 24 hours and removing 900 projects since March 2024.
@uiw/react-select
Advanced tools
Readme
当选项过多时,使用下拉菜单展示并选择内容。
import { Select } from 'uiw';
// or
import Select from '@uiw/react-select';
适用广泛的基础单选 value
的值为当前被选中的 Option
的 value
属性值。自定义 Select
请查看 <Dropdown />
组件实例。
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row>
<Col fixed>
<Select defaultValue="w">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
</Row>
);
export default Demo
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row>
<Col fixed>
<Select disabled defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
</Row>
);
export default Demo
通过 size
属性设置选择器的尺寸,提供三个尺寸参数设置。
import React from 'react';
import { Row, Col, Select, Button } from 'uiw';
const rowSty = { marginBottom: 10 };
const Demo = () => (
<div>
<Row gutter={10}>
<Col fixed>
<Select size="small" disabled defaultValue="3" style={rowSty}>
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="small">小尺寸</Button>
</Col>
</Row>
<Row gutter={10} style={rowSty}>
<Col fixed>
<Select defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="default">默认尺寸</Button>
</Col>
</Row>
<Row gutter={10}>
<Col fixed>
<Select size="large" defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="large">大尺寸</Button>
</Col>
</Row>
</div>
);
export default Demo
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Option = Select.Option;
const Group = Select.Group;
const Demo = () => (
<Row>
<Col fixed>
<Select defaultValue="w">
<Option value="w">Choose an item...</Option>
<Group label="Group 1">
<Option value="1">One</Option>
<Option value="2">Two</Option>
</Group>
<Group label="Group 2">
<Option value="3">Three</Option>
<Option value="4">Four</Option>
</Group>
</Select>
</Col>
</Row>
);
export default Demo
在 <Form />
表单中应用 <Select />
组件
import React from 'react';
import { Form, Row, Col, Select, Button, Notify } from 'uiw';
const Demo = () => (
<div>
<Form
onSubmitError={(error) => {
if (error.filed) {
return { ...error.filed };
}
return null;
}}
onSubmit={({initial, current}) => {
const errorObj = {};
if (!current.selectField) {
errorObj.selectField = '默认需要选择内容,选择入内容';
}
if(Object.keys(errorObj).length > 0) {
const err = new Error();
err.filed = errorObj;
Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
throw err;
}
Notify.success({
title: '提交成功!',
description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,
});
}}
fields={{
selectField: {
children: (
<Select>
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
)
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col fixed>{fields.selectField}</Col>
</Row>
<Row>
<Col fixed>
<Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
</Col>
</Row>
<Row>
<Col>
<pre style={{ padding: 10, marginTop: 10 }}>
{JSON.stringify(state.current, null, 2)}
</pre>
</Col>
</Row>
</div>
)
}}
</Form>
</div>
)
export default Demo
这个组件是最简单的基础样式组件,可以直接引用样式,使用 w-select
纯样式即可达到效果,下拉框右边箭头效果通过样式更改,通过 b64
工具,转换成 base64
格式。
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row style={{ backgroundColor: '#fff', margin: -15, padding: 15, borderRadius: '5px 5px 0 0' }} gutter={10}>
<Col fixed>
<select className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
<Col fixed>
<select disabled className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
</Row>
);
export default Demo
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 控制时 select 的值必须与 onChange 函数一起使用才能更新 select 的值 | Any | - |
disabled | 禁用选择器 | Boolean | false |
defaultValue | 根据 value 进行比较,判断是否选中 | Any | - |
size | 选择框尺寸 | Enum {large , default , small } | default |
FAQs
Select component
The npm package @uiw/react-select receives a total of 96 weekly downloads. As such, @uiw/react-select popularity was classified as not popular.
We found that @uiw/react-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI has drastically improved its malware response times, resolving 90% of issues in under 24 hours and removing 900 projects since March 2024.
Security News
Research
The Socket Research team breaks down an obfuscated script designed to facilitate unauthorized file uploads to multiple external services.
Security News
Node.js has automated its security release process, doubling the number of releases, and is re-evaluating unsupported experimental features with the Next 10 group to enhance security.