ReactJS 蓝图 InputGroup 组件

介绍

ReactJS 蓝图 InputGroup 组件是一个基于 React.js 和 Blueprint.js 的可重用惯用组件，用于处理输入框相关交互。

该组件可以用于文本输入框、密码输入框以及搜索框等场景。它具有可定制的边框、附加元素以及与表单元素的集成能力。

安装

使用 npm 安装:

npm install @blueprintjs/core

使用样例

在 React 应用程序中使用 InputGroup 非常简单。只需在组件内部将 InputGroup 包装在容器元素中，然后通过 props 传递所需的值即可。下面是一个使用示例:

import React from "react";
import { InputGroup } from "@blueprintjs/core";

export default function MyInputGroup() {
  return (
    <div>
      <InputGroup defaultValue="Hello" />
      <br />
      <InputGroup placeholder="What's your name?" />
    </div>
  );
}

自定义 Props

InputGroup 还允许开发者自定义组件行为。以下是 InputGroup 所支持的一些 prop 属性及其默认值:

<InputGroup
  // InputGroup 核心属性
  disabled={false}            // 是否禁用输入框
  fill={false}                // 是否填充容器
  large={false}               // 是否使用大尺寸样式
  leftIcon={undefined}        // 左侧图标元素
  onChange={undefined}        // 输入框内容变化时的回调函数
  placeholder={undefined}     // 输入框内提示信息
  rightElement={undefined}    // 右侧其他元素
  value={undefined}           // 输入框默认内容

  // 额外支持的属性
  intent="none"               // 附加元素的视觉意图
  type="text"                 // 输入框类型
/>

注意：如果没有指定 onChange 属性，则组件会处于受控状态。当您使用受控组件时，请确保在组件的更新函数中将 value 属性设置为新的输入值。

代码演示

以下是一个完整的例子，展示了使用 Blueprint InputGroup 的所有常见用法:

import React, { useState } from "react";
import { InputGroup, Button, Alignment } from "@blueprintjs/core";

export default function CustomInputGroup() {
  const [value, setValue] = useState("");

  return (
    <div style={{ width: "300px" }}>
      <InputGroup
        leftIcon="person"
        placeholder="输入邮件地址..."
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <InputGroup
        leftIcon="lock"
        placeholder="输入密码..."
        type="password"
        style={{ marginTop: "10px" }}
      />
      <InputGroup
        placeholder="输入搜索关键字..."
        rightElement={
          <Button
            icon="search"
            minimal={true}
          />
        }
        style={{ marginTop: "10px" }}
      />
      <InputGroup
        placeholder="带有边框按钮的输入框"
        rightElement={
          <Button
            text="登录"
            alignText={Alignment.RIGHT}
          />
        }
        leftIcon="user"
        style={{ marginTop: "10px" }}
      />
    </div>
  );
}

总结

ReactJS 蓝图 InputGroup 组件是一个实用的 React.js 组件，它为输入框相关交互提供了可重用的默认实现。我们可以使用它来快速构建一组不同类型的输入框，并且可以方便地通过 props 自定义输入框的外观和行为。通过使用此组件，我们可以使输入框的实现更加简单、可维护、易于扩展。