简介
react-stylish-input 是一个基于 React 的输入框组件库，提供了多种样式和功能的输入框组件，可以方便地构建各种表单。
安装
在使用 react-stylish-input 之前，需要在项目中安装该包。可以使用 npm 或 yarn 安装：
npm install react-stylish-input
或者
yarn add react-stylish-input
使用
在项目中引入 react-stylish-input 后，可以直接使用其中的组件。以 Input 组件为例，以下是一个简单的使用方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
------
------------------------
--------------- -- --------------- ------ ---------------- ---
--
------
--
-
-通过上述代码，我们创建了一个 Input 组件实例，并将其放置在 MyComponent 组件中。Input 组件接收两个参数：value 和 onChange，分别用于设置输入框的值和响应值的变化。
输入框类型
react-stylish-input 提供了多种类型的输入框组件，包括：
- Input：基础的文本输入框组件；
- TextArea：文本域组件；
- PasswordInput：密码输入框组件；
- NumberInput：数字输入框组件；
- EmailInput：电子邮件地址输入框组件；
- PhoneNumberInput：电话号码输入框组件。
1. Input 组件
Input 组件是 react-stylish-input 中最基础的输入框组件，用于接收文本型数据。
<Input value="Hello React!" onChange={(evt) => console.log(evt.target.value)} />2. TextArea 组件
TextArea 组件是 Input 组件的升级版，用于接收大段的文本。
<TextArea
value="This is a very long text."
onChange={(evt) => console.log(evt.target.value)}
/>3. PasswordInput 组件
PasswordInput 组件是一种特殊的 Input 组件，用于接收密码型数据。
<PasswordInput
value={this.state.password}
onChange={(evt) => this.setState({ password: evt.target.value })}
/>4. NumberInput 组件
NumberInput 组件是一种特殊的 Input 组件，用于接收数字型数据。
<NumberInput
value={this.state.number}
onChange={(evt) => this.setState({ number: evt.target.value })}
/>5. EmailInput 组件
EmailInput 组件是一种特殊的 Input 组件，用于接收电子邮件地址型数据。
<EmailInput
value={this.state.email}
onChange={(evt) => this.setState({ email: evt.target.value })}
/>6. PhoneNumberInput 组件
PhoneNumberInput 组件是一种特殊的 Input 组件，用于接收电话号码型数据。
<PhoneNumberInput
value={this.state.phone}
onChange={(evt) => this.setState({ phone: evt.target.value })}
/>样式
react-stylish-input 除了提供多种类型的输入框组件外，还提供了多种样式的输入框组件，可以根据不同的需要进行选择。
以下是一个示例代码，展示了各种样式的输入框组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- -------------- ------------ ----------- ---------------- - ---- ----------------------
------ -------------------------------------
----- ----------- ------- --------------- -
----- - -
----- --
--
-------- -
------ -
---- --------------------
------ -------------------- ------------ ------ --
--------- -------------------- ------------ --------- --
-------------- -------------------- ------------ -------------- --
------------ -------------------- ------------ --
----------- -------------------- ----------------------- --
----------------- -------------------- ------------------- --
------ ------------------- ----------------- -------------- ------ ------- --
--------- ------------------- ----------------- -------------- --------- ------- --
-------------- ------------------- ----------------- -------------- -------------- ------- --
------------ ------------------- ----------------- ------------ ------- --
----------- ------------------- ----------------- ----------------------- ------- --
----------------- ------------------- ----------------- ------------------- ------- --
------ ------------------- ----------------- -------------- ------ ------- --
--------- ------------------- ----------------- -------------- --------- ------- --
-------------- ------------------- ----------------- -------------- -------------- ------- --
------------ ------------------- ----------------- ------------ ------- --
----------- ------------------- ----------------- ----------------------- ------- --
----------------- ------------------- ----------------- ------------------- ------- --
------ ------------------- --------------- ------------ ------ ----- --
--------- ------------------- --------------- ------------ --------- ----- --
-------------- ------------------- --------------- ------------ -------------- ----- --
------------ ------------------- --------------- ------------ ----- --
----------- ------------------- --------------- ----------------------- ----- --
----------------- ------------------- --------------- ------------------- ----- --
------
--
-
-结语
react-stylish-input 是一个非常实用的输入框组件库，提供了多种类型和样式的输入框组件，可以大幅度提高前端开发效率。在日常开发中，我们可以根据不同的需求，灵活选择不同的输入框组件和样式进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7b238a385564ab6a23