1

tengo creado un select con varios valores de colores pero al llamarlos no me hace el cambio en otro componente div donde el background se debería modificar

export default class Color extends Component {
constructor(props) {
    super(props)
    this.state = { value: '' }

    this.handleChange = this.handleChange.bind(this)
    this.onColor = this.onColor.bind(this)
}

handleChange(event) {
    this.setState({ value: event.target.value })
}

onColor() {
    const cambio = this.state.value
    console.log(cambio)
    return cambio
}

render() {
    return (
        <select value={this.state.value} onChange={this.handleChange} onClick={this.onColor}>
            <option value='white'>Seleccione un color</option>
            <option value='red'>Rojo</option>
            <option value='green'>Verde</option>
            <option value='blue'>Azul</option>
        </select>
    );
}

}

este es el código donde selecciono un color

export default class Caja extends Component{    
styles = { backgroundColor: Color.onColor }

render(){
    return(
        <div className='caja' style={this.styles}>
        </div>
    )
}

}

y aquí donde hago "supuestamente" la modificación del style del div pero no me lo cambia

function App() {
  return (
    <div className="App">
      <header className="App-header" >
        <Color />
        <Caja />
      </header>
    </div>
  );
}
export default App;

y este es el js principal

2
  • ¿Tienes algún error en la consola del navegador? el 22 mar. 2021 a las 10:07
  • no me sale ningún error el 22 mar. 2021 a las 11:24

2 respuestas 2

1

veo que en la linea donde añadís el style de los colores dice "backgroundColor" no existe dicho atributo, el que podes usar son dos: "background-color" o bien solo "background"

entonces quedaría así:

export default class Caja extends Component{    
 styles = { background-color: Color.onColor }

 render(){
 return(
    <div className='caja' style={this.styles}>
    </div>
 )
 }
}

cualquier cosa me avisas, saludos!

5
  • le he probado pero sigue sin cambiarme el color del div voy a añadir donde tengo el principal por si es algo de las etiquetas el 22 mar. 2021 a las 14:28
  • Puede ser que se trate por el class también, en el código pusiste className prueba solo con class
    – Roy
    el 22 mar. 2021 a las 14:33
  • si lo cambio a class me salta un error de nombre y el className es para que me detecte el css del borde y tamaño el 22 mar. 2021 a las 14:38
  • Hola @Daniel, favor edita tu respuesta y agrega el codigo en formato de codigo para que tu respuesta sea mas clara a la comunidad.
    – Ragnar
    el 22 mar. 2021 a las 14:39
  • te entiendo lo del className, por otro lado veo que el atributo style en tu div no esta contenido por ninguna comilla, prueba agregándole unas comilla quedaría así style="{this.styles}"
    – Roy
    el 22 mar. 2021 a las 15:17
0

No puedes acceder al estado de un componente asi.

Lo que se aconseja es "levantar el estado", llevartelo a un ancestro que compartan Color y Caja y pasar como prop lo que necesites.

En este caso tienes 3 componentes:

  • App
    • Color (setea el color)
    • Caja (consume el color)

La solucion mas simple es hacer esto:

// App component
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.onColor = this.onColor.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  onColor() {
    const cambio = this.state.value;
    console.log(cambio);
    return cambio;
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Color selectedColor={this.state.value} handleChange={this.handleChange} handleClick={this.onColor} />
          <Caja selectedColor={this.state.value} />
        </header>
      </div>
    );
  }
}

export default App;


// Color component
const Color = ({ selectedColor, handleChange, handleClick }) => {
  return (
    <select value={selectedColor} onChange={handleChange} onClick={handleClick}>
      <option value="white">Seleccione un color</option>
      <option value="red">Rojo</option>
      <option value="green">Verde</option>
      <option value="blue">Azul</option>
    </select>
  );
};

export default Color;

// Caja component

const Caja = ({ selectedColor }) => {
  const styles = { backgroundColor: selectedColor };
  return <div className="caja" style={this.styles}></div>;
};


export default Caja;
4
  • me salta este error cuando lo ejecuto TypeError: instance.render is not a function el 23 mar. 2021 a las 8:09
  • conviertes los archivos de color y caja a function o los dejas como class el 23 mar. 2021 a las 8:11
  • vale ya mire mejor y es que no haces ninguna function en color y caja únicamente creas los valores y los envías. Gracias el 23 mar. 2021 a las 8:31
  • Claro, los dejo como functional components, me alegro que te haya funcionado el 23 mar. 2021 a las 12:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.