Question


function Textbox() {
    const [flag, setflag] = useState(false)
    const [brad, setbrad] = useState('10px')
    const [title,setTitle]=useState(null)
    const [content,setContent]=useState(null)
    const contentref=useRef()
    const titleref=useRef(null)
    const handleclick=()=>{
        console.log(contentref.current.value)
    }
    return (
        <div style={{ textAlign: 'start', marginTop: '30px' }}>

            {flag &&
                <div >
                    <div name="textbox" ref={titleref} className="title" contentEditable="true" role="textbox" aria-multiline="true"
                        tabIndex="0px" placeholder="Title" spellCheck="false" onChange={e=>setTitle(e.target.value)}></div>
                </div>
            }
            <div  name="textbox"  ref ={contentref} className="textbox" onChange={e=>handleclick()} contentEditable="true" role="textbox" aria-multiline="true"
                tabIndex="0px" placeholder="Type something..." onClick={() => {
                    setbrad('0px')
                    setflag(true)
                    
                }} style={{ borderTopLeftRadius: brad, borderTopRightRadius: brad ,minHeight:'100px'}} spellCheck="false"></div>
    
    {flag &&
    <div style={{textAlign:'center',marginTop:'20px'}}>
        <button className="btn" onClick={handleclick}>Done</button>
    </div>}
        </div>
    )
}

export default Textbox

我已经尝试了 ref.innerHTML、ref.innerTEXT 之类的所有方法，但没有任何效果对我有用。请帮助我从文本框获取输入Image of my textbox

Answer 1

const handleclick = () => {
    props.onChangetitle(titleref.current.innerHTML)    
    props.onChangecontent(contentref.current.innerHTML) 
    props.onsubmit(titleref.current.innerHTML,contentref.current.innerHTML)
    titleref.current.innerHTML=""
    contentref.current.innerHTML=""
}

return (
    <div style={{ textAlign: 'start', marginTop: '30px' }}>

        <div contentEditable ref={titleref} placeholder="Title" className="title" style={{ display: flag }}></div>
        <div contentEditable ref={contentref} placeholder="Type something..." className="textbox" onClick={() => {
            setflag(null)
            setBorder('0px')
            setheight('100px')
        }} style={{borderTopLeftRadius:border,borderTopRightRadius:border,height:height}}></div>
        <div style={{ textAlign: 'center', marginTop: '20px', display: flag }}>
            <button className="btn" onClick={handleclick}>Done</button>
        </div>
    </div>
)

这对我有用

如何在反应中从内容可编辑的 div 中获取输入

1 个答案: