forgeplus-react/src/forge/DevOps/Dispose/menusAdd.jsx

54 lines
1.2 KiB
JavaScript

import React , { useState , useEffect } from 'react';
import { Input } from 'antd';
function menusAdd ({ getName , checkDatas , k }){
const [ show, setShow ] = useState(false);
const [ value , setValue ] = useState(undefined);
const [ index , setIndex ] = useState(undefined);
const [ref, setRef ] = useState(undefined);
const [put, setPut ] = useState(false);
useEffect(() => {
if (put && ref) {
ref.focus();
}
})
useEffect(() => {
if (k) {
setIndex(k);
}
},[k])
function blurInput(){
if(value){
getName(value , index);
}
setShow(false);
setPut(false);
}
function showInput(){
let c = checkDatas();
if(c){
setShow(true);
setPut(true);
}
}
return(
<li className="menuAdd">
{ !show && <i className="iconfont icontianjia" onClick={showInput}></i> }
<Input
ref={(el) => setRef(el)}
size={"small"}
maxLength={8}
style={{width:"75px",display : `${show?"block":'none'}`}}
placeholder="新阶段名称"
value={value}
onChange={(e)=>setValue(e.target.value)} onBlur={blurInput}
/>
</li>
)
}
export default menusAdd;