更改单独文件中文本区域的颜色

Question

The issue is I'm trying to change the color of a textarea when a radio button is clicked. There's 4 radio buttons so the textarea needs to be able to change color 4 times for 4 different buttons. I'm in reactjs. I've looked up this problem and wasn't able to get any decent pointers. I've tried calling the textbox function from control.js but it doesn't do anything. I tried to use props but it didn't really work and I'm not 100% sure on how to use it. What this looks like:

controls.js (has the radio buttons)

import React from 'react';
import './App.css';
import TextBox from './textbox';

class Controls extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            tcolor: "black"
        };
    }    
    
    changeColor(id){
        switch(id){
            case "Blue":
                //TextBox.getElementById("origin").style.color = "blue";
                //this.setState({tcolor: "blue"});
                TextBox.blue();
                //document.getElementById("origin").style.color = "blue";
                //TextBox.document.getElementById("extra").style.color = "blue";
                break;
            case "Red":
                TextBox.red();
                //this.setState({ tcolor: "red" });
                break;
            case "Green":
//more code

render(){
        return (
            <div>
                <label for="colours">Colors</label><br />
                <input type="radio" id="Blue" onclick={() => this.changeColor("Blue")} name="colours" />
                <label for="Blue">Blue</label><br />
                <input type="radio" id="Red" onclick={() => this.changeColor("Red")}name="colours" />
//more code

Textbox.js:

class TextBox extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            hideBox: false,
            butt: "more",
        };
    }
    
    blue() {
        document.getElementById("origin").style.color = "blue";
        document.getElementById("extra").style.color = "blue";
    }
//the rest of the color functions

render(){
        return(
            <div>
                <div>
                    <textarea id="origin" name="origin" rows="8" cols="48">Stuff inside
                    </textarea>
                </div>);
}

Both files are properly exported.

Answer 1

You need to have a main component, let's say App.js. In it, you:

• hold the state (the active background colour)
• render the Controls component (passing in a prop that is a function called “setBackgroundColour”)
• render the Textbox component (passing in a prop that is a string called “backgroundColour)

Answer 2

You can definitely remove the TextBox altogether as you mentioned it was a try.

Your initial approach looks correct; to set the state tcolor using:

changeColor(id){
  switch(id){
    case "Blue":
      this.setState({tcolor: "blue"});
      break;
    ...
}

You need to use this tcolor as in your render function wherever needed. Eg:

render() {
  const style = {
      color: this.state.tcolor
  };
  return(
    <div>
      <textarea style={style} id="origin" name="origin" rows="8" cols="48">Stuff inside</textarea>
    </div>
  );
}

React will take care updating it everytime the state changes. Note: It's almost always a bad idea to use DOM functions like getElementById() in react.

Answer 3

You should render in the right way your TextBox component, at first try this:

render(){
        return (
            <div>
                <TextBox color={this.state.tcolor}/>
                <label for="colours">Colors</label><br />
                <input type="radio" id="Blue" onclick={() => this.changeColor("Blue")} name="colours" />
                <label for="Blue">Blue</label><br />
                <input type="radio" id="Red" onclick={() => this.changeColor("Red")}name="colours" />
//more code

The second point for you is a change state in changeColor function:

     changeColor(color){
       this.setState({tcolor: color});
     }

After function call, your state should update and your TextBox component get new props, then you can get it in your component:

class TextBox extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            hideBox: false,
            butt: "more",
        };
    }

   const style = {
     backgroundColor: this.props.color;
   }

render(){
        return(
            <div>
                <div>
                    <textarea style={style} id="origin" name="origin" rows="8" cols="48">Stuff inside
                    </textarea>
                </div>);
}

I also want to add a few recommendations for you:

1. Don't write document.getElementById("extra").style.color = "blue"; , it's bad practice for React, because you contacting directly to DOM, not in React, in React you should manage date in your app throw state, but don't try change data directly in DOM;
2. Define state only in a component which you want to manage your data or manage something in child components;
3. Try using the functional components in React, it's pretty simple;
4. Define color names correctly, with a lowercase letters;
5. Read react documentation to better figure out in library: https://reactjs.org/

Answer 4

try using background-color instead of color. So instead of calling document.getElementById('YOUR ID').style.color , which would just change the text color, use document.getElementById('YOUR ID').background.color = 'color.' Besides this, just changing the color with each different button should work fine...