我無法獲得的價值<texterea />使用 document.getElementById()

Question

我正在研究審核組件（以進行審核和評論）我正在嘗試獲取<texterea />的值，並在單擊按鈕（Enregistrer）后發出警報，該按鈕包含 onClick（SendReview），SendReview 它是function 提醒星數和文本值。

const Review = () => {
    const [rating , setRating]=useState(null);
    const [hover , setHover]=useState(null);
    //const [comment , setComment] = useState('');    
   function SendReview(){
       
       alert(rating,document.getElementById("textReview"))
       //console.log(rating +" "+textReview)
   }   
    return (
        <div className="review">
            {[...Array(5)].map((star , i)=>{

                const ratingValue = i+1
                
                return(
                    <label className="label">
                        {/* pour separer les etoils */}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input 
                            id="star"
                            className="radio"
                            type="radio" 
                            name="rating" 
                            value ={ratingValue}
                            onClick={()=>setRating(ratingValue)}                         
                            hidden
                            />
                        <FaStar 
                              className="star"
                              size={50}
                              color={ratingValue <= (hover || rating) ? "#D1653E" : "#e4e5e9" } 
                              onMouseEnter={()=>setHover(ratingValue)}
                              onMouseLeave={()=>setHover(null)}
                              />
                    </label>         
                );
            })} 
            <br />
            <br />
            <br />
            <br />
            <div>
                <form className="FormTextComment">
                    <textarea 
                            type="textarea"
                            id="textReview"
                            name="commentReview"
                            rows="4" cols="50" 
                            placeholder="  Merci de donner ton avie à propos ce Bricoleur:
                                                                                              - comment il se communique?
                                                                                              - la qualite de son sevice?
                                                                                              - le respect du delai? etc.." 
                            
                            />
                   
                    <br/>
                    <br/>
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button onClick={SendReview}  type="submit" className="btn btn-primary  mb-4">Enregistrer</button>
                </form>
            </div>  
        </div>
    )
}
export default Review;

Answer 1

您不應該直接在 React 應用程序中使用觸摸文檔 object。 嘗試將值綁定到 state 並從中讀取。

無論如何，要讀取文本區域的值，您應該執行document.getElementById("textReview").value 。 但同樣，不要這樣做。 這是一種反模式，破壞了使用 react 的全部目的。

Answer 2

您應該將 textarea 的值存儲在 useState 變量中。

我對您的代碼進行了一些更改，看看它是否有效

 const Review = () => { const [rating, setRating]=useState(null); const [hover, setHover]=useState(null); const [review, setReview]=useState(""); //const [comment, setComment] = useState(''); function SendReview(){ alert(`${rating} ${review}`) //console.log(rating +" "+textReview) } return ( <div className="review"> {[...Array(5)].map((star, i)=>{ const ratingValue = i+1 return( <label className="label"> {/* pour separer les etoils */} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="star" className="radio" type="radio" name="rating" value ={ratingValue} onClick={()=>setRating(ratingValue)} hidden /> <FaStar className="star" size={50} color={ratingValue <= (hover || rating)? "#D1653E": "#e4e5e9" } onMouseEnter={()=>setHover(ratingValue)} onMouseLeave={()=>setHover(null)} /> </label> ); })} <br /> <br /> <br /> <br /> <div> <form className="FormTextComment"> <textarea onChange={(e)=>setReview(e.target.value)} type="textarea" id="textReview" name="commentReview" rows="4" cols="50" placeholder=" Merci de donner ton avie à propos ce Bricoleur: - comment il se communique? - la qualite de son sevice? - le respect du delai? etc.." /> <br/> <br/> <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button onClick={SendReview} type="submit" className="btn btn-primary mb-4">Enregistrer</button> </form> </div> </div> ) } export default Review;

Answer 3

像打擊一樣寫你的代碼

document.getElementById("textReview").value