forked from Gitlink/forgeplus-react
53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
|
import { Input } from 'antd';
|
|
|
|
function menusRename({ name , edit , id , renameFunc }){
|
|
const [ n , setN ] = useState(undefined);
|
|
const [ show , setShow ] = useState(false);
|
|
const [ref, setRef ] = useState(undefined);
|
|
const [put, setPut ] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (edit && ref) {
|
|
ref.focus();
|
|
}
|
|
})
|
|
|
|
useEffect(()=>{
|
|
if(name){
|
|
setN(name)
|
|
}
|
|
},[name])
|
|
|
|
// 显示input框编辑
|
|
function changeShow(e){
|
|
e.stopPropagation();
|
|
setShow(true);
|
|
setPut(true);
|
|
}
|
|
|
|
function blurInput(e){
|
|
renameFunc(e.target.value,id);
|
|
setPut(false);
|
|
setShow(false);
|
|
}
|
|
return(
|
|
<div className="aboutEdit">
|
|
<span className="operateName">
|
|
{ !show && n }
|
|
<Input
|
|
ref={(el) => setRef(el)}
|
|
value={n}
|
|
size="small"
|
|
maxLength={8}
|
|
onClick={(e)=>e.stopPropagation()}
|
|
onBlur={blurInput}
|
|
style={{width:"75px",display : `${show?"block":'none'}`}}
|
|
onChange={(e)=>setN(e.target.value)}
|
|
/>
|
|
{ !show && edit && <i className="iconfont iconeditUnder font-16 color-grey-9" onClick={changeShow}></i> }
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
export default menusRename |