React中状态变量无法切换textarea背景色问题求助

核心问题 #

TextForm组件无法获取到mode状态，因为App组件没有将mode传递给TextForm，导致props.mode始终为undefined，三元表达式判断失效。

修复步骤 #

1. 给TextForm传递mode属性
   修改App组件中TextForm的调用代码，添加mode={mode}：

   <div className="container my-5">
     <TextForm heading="Enter text to analyze below" mode={mode}/>
   </div>
   

2. （可选）优化背景色与文字适配
   原代码浅色模式背景为grey，可改为更自然的white，同时为深色模式设置文字颜色保证可读性：

   <textarea 
     className="form-control" 
     id="exampleFormControlTextarea1" 
     style={{
       backgroundColor: props.mode === "dark" ? "#1a1a1a" : "white",
       color: props.mode === "dark" ? "white" : "black"
     }} 
     onChange={handleOnChange} 
     value={text} 
     placeholder="enter your text" 
     rows="11"
   ></textarea>
   

3. （可选）优化useState命名
   TextForm中setter函数命名为textarea易与标签名混淆，建议改为更清晰的setText：

   const [text, setText] = useState("")
   
   const handleOnChange = (event)=>{
     setText(event.target.value)
   }
   
   const upperCaseClick = ()=>{
     let newtext = text.toUpperCase()
     setText(newtext)
   }
   
   const lowerCaseClick = ()=>{
     let newtext = text.toLowerCase()
     setText(newtext)
   }
   

验证 #

修改后切换深色模式，textarea的背景色会随mode状态同步变化，文字颜色也会适配模式，保证正常可读。

内容的提问来源于stack exchange，提问作者dev.muhammad