React函数组件中如何通过按钮修改文本域文字颜色？求助

你的代码里有几个关键问题导致功能失效，我帮你梳理并修正：

问题点： #

• 重复ID：两个textarea都用了mybox这个id，DOM中id必须唯一，这会导致getElementById只能获取到第一个文本域，颜色输入框的操作完全无效。
• 错误的状态使用：newColor函数里x.style.color = setcolor(newc)是错误的，setcolor是React的状态更新函数，它不会返回任何值，不能直接赋值给style属性。
• 不符合React范式：直接操作DOM元素修改样式不是React的最佳实践，应该通过状态来驱动UI变化。

修正后的代码： #

import React, { useState } from 'react'

export default function Textform(props) {
  const [text, setText] = useState("");
  const [color, setColor] = useState("black"); // 默认设为黑色，匹配原逻辑初始状态

  const changeTextColor = () => {
    // 若需要切换"黑色"和输入的颜色值，可改用此逻辑：
    // setColor(prev => prev === color.trim() ? "black" : color.trim())
    // 若只需直接应用输入的颜色值，此函数可简化（甚至可去掉按钮直接实时更新）
  }

  const handleColorInputChange = (event) => {
    setColor(event.target.value);
  }

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

  return (
    <>
      {/* 文本输入框：用状态直接控制文字颜色 */}
      <div className="mb-3">
        <textarea
          className="form-control"
          value={text}
          onChange={handleTextInputChange}
          placeholder="Enter text"
          id="textInput"
          rows="8"
          style={{ color: color }} // 核心：通过状态绑定样式
        ></textarea>
      </div>

      {/* 颜色输入框：设置唯一ID */}
      <div className="mb-3">
        <textarea
          className="form-control"
          value={color}
          onChange={handleColorInputChange}
          placeholder="Enter your color choice (e.g. red, #ff0000)"
          id="colorInput"
          rows="3"
        ></textarea>
      </div>

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

关键修改说明： #

1. 唯一ID：给两个textarea分别设置textInput和colorInput的唯一id，避免DOM选择错误。
2. 状态驱动样式：直接在文本输入框的style属性中绑定color状态，React会自动根据状态变化更新UI，无需手动操作DOM。
3. 简化逻辑：点击按钮的逻辑可根据需求调整——如果需要在输入颜色和黑色之间切换，就用注释里的状态切换代码；如果只需直接应用输入的颜色，甚至可以去掉按钮，让颜色实时生效。
4. 规范命名：调整了函数和状态的命名，让代码更易读。

额外建议：颜色输入可以改用<input type="color" />，用户能直接选择颜色，体验更好，也避免输入无效颜色值：

<input
  type="color"
  value={color}
  onChange={handleColorInputChange}
  className="form-control form-control-color"
/>

内容的提问来源于stack exchange，提问作者ashish