0
124
VistasCambiar la visibilidad de un componente de reacción
hola el siguiente codigo deberia modificar la visibilidad de un componente React.js dependiendo si se hace click o no en un boton, esto cuando se hace click en un boton el primer elemento debe desaparecer y me tiene que aparecer el segundo, pero esto no pasa a que se debe esto ¿a?
Código de reacción:
import React from "react";
import styled from "styled-components";
import image from "../../assets/img/calc.png";
import CalculatorContainer from "./CalculatorDraggable/index";
class DraggableCalculator extends React.Component {
constructor(props) {
super(props);
this.state = { isCalculatorVisible: false };
}
enable() {
console.log("Make calculator visibile");
this.setState({
isCalculatorVisible: true,
});
}
render() {
return (
<p>
{this.state.isCalculatorVisible == true ? (
<CalculatorContainer />
) : (
<p></p>
)}
<Container onClick={this.enable}>
<img
key={Math.random()}
src={image}
alt="help"
width={120}
height={220}
style={{ marginLeft: 20 }}
/>
</Container>
</p>
);
}
}
export default DraggableCalculator;
const Container = styled.div`
border-radius: 25px;
border: 2px solid #73ad21;
padding: 20px;
width: 200px;
height: 200px;
/* background-color: var(--cLight2);
border: 5px solid var(--cMain); */
border-radius: 50%;
margin-left: auto;
margin-top: 30px;
margin-right: auto;
cursor: pointer;
// @MEDIA TABLET LANDSCAPE
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
width: 100px;
height: 100px;
}
img {
max-width: 100%;
max-height: 100%;
}
`;
2 Respuestas
Responde la pregunta0
Parece que la función de enable no tiene el this del componente de clase vinculado, arroja un error TypeError Cannot read properties of undefined (reading 'setState') .
O vincular this a él en el constructor
constructor(props) {
super(props);
this.state = { isCalculatorVisible: false };
this.enable = this.enable.bind(this); // <--
}
o convertir a una función de flecha para que suceda automáticamente
enable = () => {
console.log("Make calculator visible");
this.setState({
isCalculatorVisible: true,
});
}
0
Su código no funciona porque "esto" no está definido dentro de la función enable(). Es así porque el componente React (DraggableCalculator, en su caso) no vincula automáticamente sus métodos a sí mismo.
Por lo tanto, debe vincular cualquier método usted mismo dentro del constructor, como este para su caso:
constructor(props) {
super(props);
this.state = { isCalculatorVisible: false };
this.enable = this.enable.bind(this);
}