React Suite InputPicker 组件

React Suite 是一套开源的 UI 组件库，其中的 InputPicker 组件可用于从下拉菜单中选择一个选项，非常适用于表单中的数据填充。

安装

在使用前，需要先安装 React 和 React Suite，并在项目中引入 CSS 样式文件。

npm install react react-dom rsuite --save

import React from 'react';
import { InputPicker } from 'rsuite';
import 'rsuite/dist/styles/rsuite-default.css'; // 引入默认样式

使用

InputPicker 组件需要传入一组候选项和一个回调函数，以便在选定选项时触发。

<InputPicker
  data={['Red', 'Orange', 'Yellow', 'Green', 'Blue']}
  onChange={(value) => console.log(value)}
/>

除了 data 和 onChange 属性，InputPicker 还有很多可选属性，如设置菜单最大高度、允许多选等等。详见 官方文档。

高级用法

对于复杂的场景，有时候只传入 data 和 onChange 属性是不够的。此时，我们可以通过 children 属性来进行更为细粒度的控制。

例如，我们可以将 InputPicker 的每一个 Option 包装成一个自定义的组件，来修改每个选项的显示方式以及事件处理。

<InputPicker onChange={onChange}>
  {data.map((item) => (
    <OptionComponent key={item.value} value={item.value} label={item.label} />
  ))}
</InputPicker>

const OptionComponent = ({ value, label }) => {
  const handleClick = (event) => {
    console.log(`selected: ${label}`);
  };

  return (
    <div onClick={handleClick}>
      <div>{label}</div>
      <div>{value}</div>
    </div>
  );
};

除了 Option，InputPicker 还支持传入 Group 和 Divider 组件。

总结

React Suite InputPicker 组件是一个实用性很强的 UI 组件，可以用于从下拉菜单中选择一个选项。它的易用性和扩展性都非常出色，非常适用于表单类的场景。