在前端开发中，常常需要手动构建表单元素，这不仅浪费时间，而且极容易出现错误。npm 包 react-input-primitives 提供了一种简单而高效的构建表单元素的方法，可以大大减少开发时间和错误率。
安装
安装 react-input-primitives 可以使用 npm 命令：
npm install --save react-input-primitives
使用
首先，需要导入包：
import { Input } from 'react-input-primitives';然后，可以使用 Input 组件构建一个表单元素：
<Input type="text" name="username" defaultValue="input your username" />
其中，type 属性表示输入框类型，name 属性表示表单元素名称，defaultValue 属性表示默认值。
高级功能
样式
可以通过 className 属性设置样式：
<Input type="text" name="username" defaultValue="input your username" className="form-input" />
事件监听
可以通过 onChange 属性监听输入框内容变化：
function handleInputChange(event) {
console.log(event.target.value);
}
<Input type="text" name="username" defaultValue="input your username" onChange={handleInputChange} />非受控组件
可以通过 defaultChecked 和 defaultSelected 属性设置非受控组件的默认值：
<Input type="checkbox" name="remember" defaultChecked /> <Input type="radio" name="gender" value="male" defaultSelected />
总结
react-input-primitives 提供了一种简单而高效的构建表单元素的方法。通过本文的介绍和示例，你已经可以快速上手 react-input-primitives 并享受它带来的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730a81e8991b448e935a