Estoy usando una biblioteca React para implementar un gráfico de barras y lo que estoy tratando de lograr es mostrar la información sobre herramientas solo cuando hago clic en una serie. Estoy tratando de lograr esto alternando entre el bloque de visualización y ninguno, pero actualmente, la información sobre herramientas no aparece. ¿Qué estoy haciendo mal aquí? Aquí está mi código:
import React, { useState } from 'react'; import * as ReactDOM from 'react-dom'; import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem, ChartSeriesItemTooltip, } from '@progress/kendo-react-charts'; import 'hammerjs'; const seriesData = [1, 2, 3]; const ChartContainer = () => { let [isVisible] = React.useState('none'); return ( <Chart onSeriesClick={(e) => { // let positionX = e.originalEvent.x.client; // let positionY = e.originalEvent.y.client; // let value = e.value; // alert(positionX, positionY, value); let positionX = e.nativeEvent.x; let positionY = e.nativeEvent.y; let value = e.value; let myTooltip = document.querySelector('.k-chart-tooltip-wrapper'); console.log(myTooltip); myTooltip.style.display = 'block' != 'none'; }} > <ChartTooltip className="my-tooltip" /> <ChartSeries> <ChartSeriesItem data={seriesData} /> <ChartSeriesItem data={seriesData}> <ChartSeriesItemTooltip background="green" /> </ChartSeriesItem> </ChartSeries> </Chart> ); }; ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));y aquí hay un ejemplo que se puede probar:
https://stackblitz.com/edit/react-ahypjv-xtf7nr?file=app/main.jsx
Esto no funcionará:
myTooltip.style.display = 'block' != 'none'; 'block' != 'none' es una comparación que produce un valor booleano, por lo que esto es equivalente a:
myTooltip.style.display = true; Parece casi sensato, pero como sabe, no es así como funciona la propiedad CSS de display .
Si está tratando de alternarlo, simplemente verifique el valor actual y cámbielo a su opuesto:
myTooltip.style.display = myTooltip.style.display == 'block' ? 'none' : 'block'; Sería bueno presentarle una clase CSS, por ejemplo, .tooltip-visible , para que pueda escribir:
myTooltip.classList.toggle('tooltip-visible');La propiedad display: none evita que un elemento se incluya en el DOM durante la fase de renderizado. Debe cambiar a visibility:hide (no es ideal para información sobre herramientas) o usar React para inyectar el elemento.
<Chart onSeriesClick={()=>{this.setState({tooltipVisible:true}}> { this.state.tooltipVisible ? <Tooltip /> : <></> } </Chart>Administrar el estado de la información sobre herramientas puede volverse engorroso si tiene muchos de ellos, por lo que podría considerar una biblioteca para manejarlo por usted, como Bootstrap.
Para ocultar un elemento y eliminarlo del diseño del documento, establezca la propiedad de
displayennoneen lugar de usarvisibility. - "visibilidad - CSS: hojas de estilo en cascada | MDN"
establecer un estado con el valor "ninguno"
const [display, setDisplay] = useState("none")Coloque un evento onClick en el botón que llama a la siguiente función:
function toggleDisplay() { if (display === "none") { setDisplay("block") else { setDisplay("none") } }de esta manera, cuando se hace clic en su botón, alterna ese estado entre los valores que necesita.
Luego, en el elemento en el que desea configurar la propiedad de visualización, agregue el accesorio de estilo y establezca su estado de visualización como el valor CSS de visualización:
<MyComponent style={{display: display}} />