react inline edit

React-Inline-Edit

反应的内联编辑。

安装

npm install -S @jswork/react-inline-edit

用法

1. 导入CSS

 @import \" ~@jswork/react-inline-edit/dist/style.css \" ;

// or use sass
@import \" ~@jswork/react-inline-edit/dist/style.scss \" ;

// customize your styles:
$react-inline-edit-options : ()

2. 导入JS

 import React , { useState , useEffect } from \'react\' ;
import ReactInlineEdit from \'@jswork/react-inline-edit\' ;
import styled from \'styled-components\' ;
import \'../../src/components/style.scss\' ;

const Container = styled . div `
  width: 80%;
  margin: 30px auto 0;
` ;

export default ( ) => {
  const [ value , setValue ] = useState ( \'Hello inline edit\' ) ;

  useEffect ( ( ) => {
    console . log ( \'value changed:\' , value ) ;
  } , [ value ] ) ;

  return (
    < Container >
      < ReactInlineEdit value = { value } inputClassName = \'test-cls\'
                       onChange = { ( e ) => setValue ( e . target . value ) } />
    </ Container >
  ) ;
} ; 

预览

• https://afeiship.g*it**hub.io/reeact-inline-edit/

执照

根据MIT许可发布的代码。