简介
react-managed-input 是一个 React 组件，用于干净、简单地将表单输入与组件状态绑定在一起。它降低了表单管理的困难度，使得表单输入组件更容易编写和维护，并减少了输入错误的风险。
安装
你可以使用 npm 包管理器来安装 react-managed-input：
npm install react-managed-input
使用方法
下面我们来一步步地看 react-managed-input 的使用方法。
首先在 React 组件中导入 react-managed-input :
import ManagedInput from 'react-managed-input';
然后就可以在组件中使用 ManagedInput 组件：
<ManagedInput type="text" name="username" label="Username" value={username} onChange={setUsername} />在这个例子中，我们创建了一个 ManagedInput 组件，它的类型是文本类型，名称是 username，标签是 Username，它的初始值是使用 useState 定义的 username 状态，当它的值发生改变时，它会调用 setUsername 函数。
这个使用示例可以在一个成文的表单 HTML 代码中看到：
<label for="username">Username</label> <input type="text" name="username" id="username" />
高级 API
数据转换
你可以通过提供 valueTransformer 属性来自定义输入的值。它需要一个函数作为输入，并返回通过输入的值运算后得到的值。
<ManagedInput type="text" name="username" label="Username"
value={username} onChange={setUsername}
valueTransformer={value => value.trim().toLowerCase()}
/>在这个例子中，我们创建了一个 ManagedInput 组件，它的类型是文本类型，名称是 username，标签是 Username，它的初始值是使用 useState 定义的 username 状态，当它的值发生改变时，它会调用 setUsername 函数。同时，我们指定了一个自定义的值转换函数，将用户输入的值变为小写字母和去除两边空格的字符串。
校验
当用户输入不符合要求时，你可以通过提供 validate 属性来自定义输入的验证。
<ManagedInput type="email" name="email" label="Email"
value={email} onChange={setEmail}
validate={value => value.indexOf('@') === -1 ? 'Invalid email address' : undefined}
/>在这个例子中，我们创建了一个 ManagedInput 组件，它的类型是邮件类型，名称是 email，标签是 Email，它的初始值是使用 useState 定义的 email 状态，当它的值发生改变时，它会调用 setEmail 函数。我们进一步指定了一个自定义验证函数，用来检查用户输入的值是否符合一个邮件地址的规范。如果验证失败，validate 函数返回一个提示字符串，以提示用户输入的数据格式错误。
结论
react-managed-input 是一个方便简洁的 React 组件，可以用于绑定和管理表单输入组件的状态。高级 API 提供了一些额外的功能，比如数据转换和验证。使用它可以提高表单输入的效率和准确性，在 React 项目中有着广泛的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b281e8991b448dff0b