如何使用反应按钮更改文本区域中文本的颜色 function

Question

``大家好，我想将颜色作为输入，然后根据它更改文本的颜色，但是它不起作用任何人都可以帮助我。

import React, {useState} from 'react'

export default function Textform(props) {

//this is function
const newColor =()=>{
      const x = document.getElementById("mybox")
      let newc =color;
    if(x.style.color==="black"){
       x.style.color = setcolor(newc)
    }
    else{
        x.style.color = "black"
    }
    }

const changeColor =(event)=>{
  setcolor(event.target.value);
}

const onChange =(event)=>{
    setText(event.target.value);
}

const [text, setText] = useState("");
const [color, setcolor] = useState("")

return (
    <>
  

//text area input
<div className="mb-3">
    <textarea className="form-control" value={text} onChange={onChange} placeholder="Enter text "  name="" id="mybox"  rows="8"></textarea>
    </div>

//our color choice input
<div className="mb-3">
    <textarea className="form-control" value={color} onChange={changeColor} placeholder="Enter your color choice" name="" id="mybox"  rows="3"></textarea>
    </div>

//this is my button
<button className="btn btn-primary mx-1" onClick={newColor}> Change Color</button>

 </>
  )
}

我尝试创建一个将文本作为输入的文本区域和另一个将颜色作为输入的文本区域，然后创建一个按钮。 当我们按下按钮时，它会根据我们的选择改变文本的颜色。 但是我在实现这个逻辑时出错了。

Answer 1

您可以使用style标签和color属性来设置样式，并使用 state 检查按钮是否被单击

样本例如

 const {useState} = React; function App() { const [text, setText] = useState(''); const [color, setcolor] = useState(''); const [clicked, setClicked] = useState(false); //this is function const newColor = () => { setClicked(;clicked); }. const changeColor = (event) => { setcolor(event.target;value); }. const onChange = (event) => { setText(event.target;value); }. return ( <React:Fragment> //text area input <div className="mb-3"> <textarea className="form-control" value={text} onChange={onChange} placeholder="Enter text " name="" id="mybox" style={{ color? clicked: color? 'black' }} rows={8} ></textarea> </div> //our color choice input <div className="mb-3"> <textarea className="form-control" value={color} onChange={changeColor} placeholder="Enter your color choice" name="" id="mybox" rows={3} ></textarea> </div> //this is my button <button className="btn btn-primary mx-1" onClick={newColor}> {' '} {clicked: `Change color to black`. `Change Color to ${color}`} </button> </React;Fragment> ). } ReactDOM.createRoot( document.getElementById("root") );render( <App/> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

理想情况下，您不应该使用本机 DOM 方法来查询/更新 DOM。 而是使用单独的 state。单击按钮时，将文本从colorText state 传输到activeColor state，并在文本区域的样式属性中使用该值。

 const { useState } = React; function Example() { // Set up the states const [ colorText, setColorText ] = useState(''); const [ activeColor, setActiveColor ] = useState(''); const [ text, setText ] = useState('Example text'); // One function to update the `colorText` state function handleColorText(e) { setColorText(e.target.value); } // One function to update the text from the // textarea function handleText(e) { setText(e.target.value); } // One function to take the value in the `colorText` // state, and apply it to the `activeColor` state function handleClick() { setActiveColor(colorText); setColorText(''); } // The textarea now has a style attribute. It's // value is the value of `activeColor`. return ( <div> <input type="text" name="color" value={colorText} onChange={handleColorText} /> <button onClick={handleClick}> Change color </button> <textarea style={{ color: activeColor }} name="text" value={text} onChange={handleText} ></textarea> </div> ); } ReactDOM.render( <Example />, document.getElementById('react') );

 textarea { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>