输入/表单元素React组件

表单元素允许您创建灵活且美观的表单布局。表单元素只是众所周知的列表视图 (列表和列表项React组件) 但带有一些额外的组件。

查看 Framework7 的输入 / 表单元素以便了解其外观。

输入组件

包含以下组件：

ListInput- 列表项输入元素
Input- 输入元素

输入属性

属性	类型	默认	描述
<ListInput> 属性
media	字符串		列表项媒体图像 URL
label	字符串		输入的标签文本
floatingLabel	布尔值	false	启用浮动标签
outline	布尔值	false	使输入轮廓
input	布尔值	true	是否应该渲染输入元素。如果您想在内部使用自定义输入，请禁用。
type	字符串		输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型： textarea- 渲染 textarea 元素 select- 渲染 select 元素 datepicker- 在输入聚焦时打开日历on input focus colorpicker- 在输入聚焦时打开颜色选择器on input focus texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable	布尔值	false	使 textarea 可调整大小
inputStyle	对象		输入的 "style" 属性的值，如果您需要传递额外的样式
clearButton	布尔值	false	添加输入清除按钮，点击时将清除输入值
validate	布尔值	false	当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用`error-message`与`error-message-force`props.
validateOnBlur	布尔值	false	当启用时，输入仅在失去焦点时进行验证。
onValidate	函数		输入验证时执行的回调，返回布尔值指示输入是否有效。 `<ListInput type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字符串		当输入值无效时显示的自定义错误消息
errorMessageForce	布尔值	false	强制错误消息为强制。在您使用自定义验证并希望在需要时显示/隐藏错误消息的情况下很有用
info	字符串		带有关输入信息的自定义附加文本
name	字符串		输入名称
占位符	字符串		输入占位符
id	字符串		包装元素 ID 属性
inputId	字符串		输入元素 ID 属性
值	字符串数字		输入值。如果`type="datepicker"`则值必须作为日历接受的 - 日期数组，例如`value={[new Date()]}` 如果`type="colorpicker"`则值必须作为颜色选择器接受的 - 颜色对象，例如`value={{hex: '#ff0000'}}` 如果`type="texteditor"`则值应为 HTML 字符串
defaultValue	字符串数字		无受控组件的情况下的输入值
inputmode	字符串		输入的本地 "inputmode" 属性的值
size	字符串数字		输入的本地 "size" 属性的值
pattern	字符串		输入的本地 "pattern" 属性的值
accept	字符串数字		输入的本地 "accept" 属性的值
autocomplete	字符串		输入的本地 "autocomplete" 属性的值
autofocus	布尔值	false	输入的本地 "autofocus" 属性的值
autosave	字符串		输入的本地 "autosave" 属性的值
禁用	布尔值	false	将输入标记为禁用
max	字符串数字		输入的本地"max"属性的值
min	字符串数字		输入的本地"min"属性的值
step	字符串数字		输入的本地"step"属性的值
maxlength	字符串数字		输入的本地"maxlength"属性的值
minlength	字符串数字		输入的本地"minlength"属性的值
multiple	布尔值	false	输入的本地"multiple"属性的值
只读	布尔值	false	将输入标记为只读
required	布尔值	false	将输入标记为必填
tabindex	字符串数字		输入的本地"tabindex"属性的值
noStoreData	布尔值	false	允许在使用时忽略输入值被存储表单存储
ignoreStoreData	布尔值	false	与上一个相同
wrap	布尔值	true	当启用时，它将被包装在`<li>`元素之前插入元素
calendarParams	对象		带有日历参数当使用时`type="datepicker"`
colorPickerParams	对象		带有颜色选择器参数当使用时`type="colorpicker"`
textEditorParams	对象		带有文本编辑器参数当使用时`type="texteditor"`
<Input> 属性
outline	布尔值	false	使输入轮廓
wrap	布尔值	true	定义输入是否应被包装在`<div class="input">`元素中。
type	字符串		输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型： textarea- 渲染 textarea 元素 select- 渲染 select 元素 datepicker- 在输入聚焦时打开日历on input focus colorpicker- 在输入聚焦时打开颜色选择器on input focus texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable	布尔值	false	使 textarea 可调整大小
inputStyle	对象		输入的 "style" 属性的值，如果您需要传递额外的样式
clearButton	布尔值	false	添加输入清除按钮，点击时将清除输入值
validate	布尔值	false	当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用`error-message`与`error-message-force`props.
validateOnBlur	布尔值	false	当启用时，输入仅在失去焦点时进行验证。
onValidate	函数		输入验证时执行的回调，返回布尔值指示输入是否有效。 `<Input type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字符串		当输入值无效时显示的自定义错误消息
errorMessageForce	布尔值	false	强制错误消息为强制。在您使用自定义验证并希望在需要时显示/隐藏错误消息的情况下很有用
info	字符串		带有关输入信息的自定义附加文本
name	字符串		输入名称
占位符	字符串		输入占位符
id	字符串		包装元素 ID 属性
inputId	字符串		输入元素 ID 属性
值	字符串数字		输入值。如果`type="datepicker"`则值必须作为日历接受的 - 日期数组，例如`value={[new Date()]}` 如果`type="colorpicker"`则值必须作为颜色选择器接受的 - 颜色对象，例如`value={{hex: '#ff0000'}}` 如果`type="texteditor"`则值应为 HTML 字符串
defaultValue	字符串数字		无受控组件的情况下的输入值
inputmode	字符串		输入的本地 "inputmode" 属性的值
size	字符串数字		输入的本地 "size" 属性的值
pattern	字符串		输入的本地 "pattern" 属性的值
accept	字符串数字		输入的本地 "accept" 属性的值
autocomplete	字符串		输入的本地 "autocomplete" 属性的值
autofocus	布尔值	false	输入的本地 "autofocus" 属性的值
autosave	字符串		输入的本地 "autosave" 属性的值
已选中	布尔值	false	将输入标记为选中
禁用	布尔值	false	将输入标记为禁用
max	字符串数字		输入的本地"max"属性的值
min	字符串数字		输入的本地"min"属性的值
step	字符串数字		输入的本地"step"属性的值
maxlength	字符串数字		输入的本地"maxlength"属性的值
minlength	字符串数字		输入的本地"minlength"属性的值
multiple	布尔值	false	输入的本地"multiple"属性的值
只读	布尔值	false	将输入标记为只读
required	布尔值	false	将输入标记为必填
tabindex	字符串数字		输入的本地"tabindex"属性的值
noStoreData	布尔值	false	允许在使用时忽略输入值被存储表单存储
ignoreStoreData	布尔值	false	与上一个相同
calendarParams	对象		带有日历参数当使用时`type="datepicker"`
colorPickerParams	对象		带有颜色选择器参数当使用时`type="colorpicker"`
textEditorParams	对象		带有文本编辑器参数当使用时`type="texteditor"`

输入事件

事件	参数	描述
<ListInput>, <Input>事件
focus	(event)	当用户聚焦到输入时触发。
blur	(event)	当用户失去输入焦点时触发。
input	(event)	输入值改变时立即触发。注意：输入事件在beforeinput、keypress、keyup、keydown事件之后触发。
change	(event)	如果值改变，则在blur时触发。
inputClear	(event)	当输入清除按钮被点击时触发
textareaResize	(event)	如果可调整大小的文本区域被调整大小，则触发。`event.detail`将包含对象`initialHeight`, `currentHeight`和`scrollHeight`属性
inputEmpty	(event)	当输入值变为空时触发
inputNotEmpty	(event)	当输入值变为非空时触发
calendarChange	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="datepicker"` Calendar value changed. As an argument it receives array with selected dates.
colorPickerChange	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="colorpicker"` Color Picker value changed. As an argument it receives object with Color Picker value.
textEditorChange	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="texteditor"` Text Editor value changed. As an argument it receives Texteditor value (HTML string).

输入插槽

<ListInput>有额外的插槽用于自定义元素：

default- 在情况下type="select"或type="textarea"- 元素将被放置在select或textarea标签内。
info- 元素将被插入到包含信息消息的容器中
error-message- 元素将被插入到包含错误消息的容器中
label- 元素将被插入到包含输入标签的容器中
input- 元素将替换输入元素（inputprop也必须设置为false)
root-start- 元素将被插入到<li>元素之前插入元素
root / root-end- 元素将被插入到<li>元素之前插入元素
content-start- 元素将被插入到<div class="item-content">元素之前插入元素
content / content-end- 元素将被插入到<div class="item-content">元素之前插入元素
inner-start- 元素将被插入到<div class="item-inner">元素之前插入元素
inner / inner-end- 元素将被插入到<div class="item-inner">元素之前插入元素
media- 元素将被插入到<div class="item-media">元素之前插入元素

示例

inputs.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, List, Icon, ListInput, Range } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Form Inputs" />

    <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Password" type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Gender" type="select" defaultValue="Male" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </ListInput>

      <ListInput
        label="Birthday"
        type="date"
        defaultValue="2014-04-30"
        placeholder="Please choose..."
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Date time" type="datetime-local" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Range" input={false}>
        <Icon icon="demo-list-icon" slot="media" />
        <Range slot="input" value={50} min={0} max={100} step={1} />
      </ListInput>

      <ListInput label="Textarea" type="textarea" placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" floatingLabel type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" floatingLabel type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels + Outline Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput outline label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="E-mail"
        floatingLabel
        type="email"
        placeholder="Your e-mail"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Phone"
        floatingLabel
        type="tel"
        placeholder="Your phone number"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Bio"
        floatingLabel
        type="textarea"
        resizable
        placeholder="Bio"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Validation + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
        <span slot="info">
          Pattern validation (<b>apple|banana</b>)
        </span>
      </ListInput>

      <ListInput
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Number"
        type="text"
        placeholder="Enter number"
        info="With custom error message"
        errorMessage="Only numbers please!"
        required
        validate
        pattern="[0-9]*"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Icon + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Label + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton />

      <ListInput label="Password" type="password" placeholder="Your password" clearButton />

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton />

      <ListInput label="URL" type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Only Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton />

      <ListInput type="password" placeholder="Your password" clearButton />

      <ListInput type="email" placeholder="Your e-mail" clearButton />

      <ListInput type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Inputs + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" info="Full name please" clearButton />

      <ListInput
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
        clearButton
      />

      <ListInput
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
        clearButton
      />

      <ListInput type="url" placeholder="URL" info="Your website URL" clearButton />
    </List>
  </Page>
);

改进此文档

在本页上

输入组件
输入属性
输入事件
输入插槽
示例