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

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

您可以使用钩子轻松地做到这一点，但如果您坚持以这种方式进行，那么您的代码就会出现一些问题。 首先，您使用 setcolor 函数来设置颜色状态值，但您没有使用它来设置文本的颜色。 您正在使用

x.style.color = 设置颜色(newc)

line，这是将元素的颜色属性设置为 setcolor 函数的返回值，这是未定义的。 你应该使用设置颜色函数来设置文本的颜色是这样的：

x.style.color = 颜色

您还使用 const 关键字来定义 x 变量，它是对 ID 为 mybox 的元素的引用。 x 变量无法重新分配，但您正试图在 newColor 函数的 else 块中重新分配它。 相反，您应该使用 let 关键字来定义 x 变量，以便可以重新分配它。

import React, {useState} from 'react'

export default function Textform(props) {
  const newColor = () => {
    let x = document.getElementById("mybox")
    let newc = color;
    if (x.style.color === "black") {
      x.style.color = color
    } 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 (
    <>
      <div className="mb-3">
        <textarea className="form-control" value={text} onChange={onChange} placeholder="Enter text "  name="" id="mybox"  rows="8"></textarea>
      </div>

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

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

我删除了常数newColor 函数中 x 变量之前的关键字，并将其替换为让关键词。这允许在 else 块中重新分配 x 变量。

Answer 2

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

样本例如

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>