云策 WordPress 开发者社区

块编辑器开发文档

InputControl

查看官方原文 ↗
💡 云策文档标注

概述

InputControl 是一个实验性的 React 组件，用于让用户输入和编辑文本，旨在未来与 TextControl 合并或替换它。组件目前处于早期阶段，可能发生重大变更。

关键要点

  • 组件状态：实验性，可能发生破坏性更改
  • 核心功能：提供文本输入和编辑能力
  • 导入方式：从 '@wordpress/components' 导入 __experimentalInputControl
  • 必需属性：onChange 函数用于接收输入值
  • 可选属性：包括 disabled、label、size、type 等，用于自定义输入行为
  • 特殊属性：__next40pxDefaultSize 用于启用未来默认尺寸

代码示例

import { __experimentalInputControl as InputControl } from '@wordpress/components';
import { useState } from 'react';

const Example = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <InputControl
            __next40pxDefaultSize
            value={ value }
            onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
        />
    );
};

注意事项

由于是实验性组件，开发者在使用时需注意其不稳定性和未来可能的变更。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace TextControl.

Usage

import { __experimentalInputControl as InputControl } from '@wordpress/components';
import { useState } from 'react';

const Example = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <InputControl
            __next40pxDefaultSize
            value={ value }
            onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
        />
    );
};

Props

disabled

If true, the input will be disabled.

  • Type: Boolean
  • Required: No
  • Default: false

isPressEnterToChange

If true, the ENTER key press is required in order to trigger an onChange. If enabled, a change is also triggered when tabbing away (onBlur).

  • Type: Boolean
  • Required: No
  • Default: false

hideLabelFromVision

If true, the label will only be visible to screen readers.

  • Type: Boolean
  • Required: No

label

If this property is added, a label will be generated using label property as the content.

  • Type: String
  • Required: No

labelPosition

The position of the label (top, side, bottom, or edge).

  • Type: String
  • Required: No

onChange

A function that receives the value of the input.

  • Type: Function
  • Required: Yes

prefix

Renders an element on the left side of the input.

  • Type: React.ReactNode
  • Required: No

size

Adjusts the size of the input.
Sizes include: default, small

  • Type: String
  • Required: No
  • Default: default

suffix

Renders an element on the right side of the input.

  • Type: React.ReactNode
  • Required: No

type

Type of the input element to render. Defaults to “text”.

  • Type: String
  • Required: No
  • Default: “text”

value

The current value of the input.

  • Type: String
  • Required: No

__next40pxDefaultSize

Start opting into the larger default height that will become the default size in a future version.

  • Type: Boolean
  • Required: No
  • Default: false