基于Tailwind CSS的选择输入React组件的使用教程

一个建立在TailwindCSS之上的漂亮的、可定制的、可搜索的选择输入React组件。

如何使用它

1.安装。

c# Yarn
$ yarn add react-tailwindcss-select

# NPM
$ npm i react-tailwindcss-select

2.导入选择组件。

c// React component
import React from 'react';
import Select from 'react-tailwindcss-select';

c// With React Hooks
import {useState} from 'react';
import Select from 'react-tailwindcss-select';

3.在JS阵列中定义你的选项。

const options = [
  {value: "vue", label: "Vue Script"},
  {value: "React", label: "React Script"},
  {value: "Angular", label: "Angular Script"},
];

4.基本使用方法。

// React Component
class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {animal: null};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(value) {
      console.log("value:", value);
      this.setState({animal: value});
  }
  render() {
      const { animal } = this.state;
      return (
          <Select
              value={animal}
              onChange={this.handleChange}
              options={options}
          />
      );
  }
}

// React Hooks
const App = () => {
  const [animal, setAnimal] = useState(null);
  const handleChange = (value) => {
      console.log("value:", value);
      setAnimal(value);
  };
  return (
      <Select
          value={animal}
          onChange={handleChange}
          options={options}
      />
  );
};
export default App;

5.可用的道具。

isClearable: PropTypes.bool,
isDisabled: PropTypes.bool,
isMultiple: PropTypes.bool,
isSearchable: PropTypes.bool,
loading: PropTypes.bool,
menuIsOpen: PropTypes.bool,
noOptionsMessage: PropTypes.string,
onChange: PropTypes.func.isRequired,
options: OptionsType,
placeholder: PropTypes.string,
searchInputPlaceholder: PropTypes.string,
value: PropTypes.oneOfType([
  PropTypes.shape({
      value: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
  }),
  OptionsType,
]),

预览

The postBeautiful Select Input Component Based On Tailwind CSSappeared first onReactScript.