@42shadow42/react-editable-title 中文文档教程

Question

React 的可编辑标题实现。

Installation

npm install react-editable-title

Usage

import React, { useState } from 'react'
import Editable from 'react-editable-title'

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

  const handleTextUpdate = (current: string) => {
    setText(current)
  }

  return (
        <Editable 
          text={text} 
          placeholder="Type here"
          cb={handleTextUpdate}
         />
  )
}

API

Attribute	Type	Description	Required
text	string	Text to be displayed	Yes
cb	function	Invoked when the text has been edited	Yes
onEditCancel	function	Invoked when the edit has been canceled	No
onValidationFail	function	Invoked when the text hasn't matched the regex	No
placeholder	string	Placeholder text of the input element	No
saveOnBlur	boolean	Attempts to save text input on unfocus. Default is true	No
seamlessInput	boolean	Presents text-editor alike experience. Default is false	No
inputPattern	string	Regex pattern of desired input	No
inputErrorMessage	string	Info message about mismatch of input	No
inputMinLength	number	Min length accepted as an input	No
inputMaxLength	number	Max length accepted as an input	No

Features

该组件可以通过键盘按键进行控制。 按 Enter 保存或按 Esc 取消编辑。 如果文本没有更改，则Enter 和Edit 按钮都不起作用。

您还可以使用您提供的 regex 控制输入的有效性。 如果正则表达式与用户输入不匹配 然后您想要的错误消息将显示在输入字段的下方。

Contributing

欢迎请求请求。 对于重大更改，请先打开一个问题来讨论您想要更改的内容。

请确保适当地更新测试。 谢谢 :raised_hands:

License

GPL