Skip to main content

Input

通过鼠标或键盘输入字符。

基本用法​

可通过 placeholder 设置默认提示，defaultValue 设置默认值。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input />
      <Input placeholder="\(^o^)/~" />
      <Input defaultValue="默认值" />
    </div>
  );
}

禁用状态​

可通过 disabled 属性设为禁用状态。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input disabled/>
    </div>
  );
}

只读状态​

可通过 readOnly 属性设为只读状态。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input readOnly/>
    </div>
  );
}

边框属性​

  • 可通过 border 属性设为 false 去除边框。
  • 可通过 radius 属性设置边框圆角半径。
function App() {
  return (
    <div className="ykui-demo-column">
      <Input border={false}/>
      <Input radius={10}/>
    </div>
  );
}

错误状态​

可通过 error 属性设为禁用状态。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input error/>
    </div>
  );
}

限制输入长度​

可通过 InputLimitLength 设置 max 属性限制输入框输入长度。

function App() {
  const [text, setText] = useState('')

  return (
    <div className="ykui-demo-column">
      <InputLimitLength max={12} value={text} onChange={val => setText(val)} />
    </div>
  );
}

前后置输入框​

可通过 prefix、suffix、innerPrefix、innerSuffix 属性设置前后缀。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input
        prefix={<Input.Append>http://</Input.Append>}
        suffix={<Input.Append>com</Input.Append>}
      />
      <Input innerPrefix={<Button>🌛</Button>} />
      <Input innerSuffix={<Button>🌞</Button>} />
    </div>
  );
}

清空输入框内容​

可通过 clearable 属性设为 true 清空输入框内容。

function App() {
  return (
    <div className="ykui-demo-column">
      <Input clearable/>
    </div>
  );
}

搜索输入框​

可通过 searchable 属性设为搜索状态，添加onSearch点击搜索事件， 通过onChange事件改变输入框的值。

function App() {
  const [searchInput, setSearchInput] = useState('')
  const onSearch = () => {}
  return (
    <div style={{ width: '240px' }}>
      <Input clearable searchable value={searchInput} onChange={v => setSearchInput(v)} onSearch={onSearch} />
    </div>
  );
}

API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
defaultValue作为非受控组件时的默认值string--
value输入值any--
placeholder提示string--
readOnly是否只读boolean--
disabled是否禁用boolean--
border是否有边框boolean--
radius圆角半径number--
prefix前缀ReactNode--
suffix后缀ReactNode--
innerPrefix输入框内的前缀ReactNode--
innerSuffix输入框内的后缀ReactNode--
borderSuffixborder 后缀ReactNode--
searchable是否可搜索boolean--
clearable是否可清空boolean--
onChange值变化时触发Func--
onPressEnter按回车键时被调用Func--
onFocus聚焦时触发Func--
onBlur失焦时触发Func--
onClear清空时触发Func--
onSearch搜索时触发Func--