Clase de css condicional no está cambiando en el ratón OnEnter o ratón OnOver en reactjs

Question

Estoy tratando de mostrar datos en la tabla en que cada fila contiene un icono de información que debe ser visible en el ratón. y podemos mostrar un pop arriba haciendo clic en ese icono de la información.(hay un método onlclick en ese botón de información) He escrito abajo algo de eso para eso. {filteredVehicles.map(t => this.onClickReportRow(t.reportId) }> {t.reportName} this.showPopUp()} /> )} onClickReportRow(reportId){ this.selectedReportId= reportId } Así que aquí cuando estoy hovering on row, evento de hovering se llama pero esa clase condicional no se está cambiando. esto está funcionando si estoy usando el método onclick y no hay onclick en fuente impresionante de lo contrario no está trabajando para onclick también. este es un problema muy raro no sabes cuál es exactamente el problema. Gracias en Adavnce.

bitcraftsman · Accepted Answer

El asunto está aquí:esto.selectedReportId== t.reportId Resuelveesto.selectedReport Id es función o qué?, usted necesita hacer estado aquí para comparar el repord Id so that on event mouse Introduzca o deje el valor de los cambios estatales y puede aplicar cambios en el render Enlacehttps://codesandbox.io/s/upbeat-turing-q4jf1?file=/src/App.js:0-1827 import React, { Component } from  react ; import  ./styles.css ; import { FontAwesomeIcon } from  @fortawesome/react-fontawesome ; import { faCoffee } from  @fortawesome/free-solid-svg-icons ; const element = ; class App extends Component { constructor(props) { super(props); this.state = { filteredVehicles: [ { reportId: 1, reportName:  One  }, { reportId: 2, reportName:  TWO  } ], selectedReportId: null, popUp: false }; } onClickReportRow = (ID) => { this.setState({ selectedReportId: ID }); }; showPopUp = () => { this.setState({ popUp: !this.state.popUp }); }; handleonMouseLeave = () => { this.setState({ selectedReportId:    }); }; render() { return ( Hello CodeSandbox Start editing to see some magic happen! {this.state.filteredVehicles.map((t) => ( this.onClickReportRow(t.reportId)} onMouseLeave={() => this.handleonMouseLeave()} > {t.reportName} {element} ))} {this.state.popUp ? ( Required PopUp ) : null} ); } } export default App;

Gpt · Answer

El problema parece estar en la forma en que estás intentando manejar el evento de entrada del ratón (onmouseenter) y cómo estás cambiando la clase condicional en React. Aquí hay algunas sugerencias para corregir el problema:

En React, no se utiliza la convención onmouseenter, en su lugar se utiliza onMouseEnter. Debes modificar tu código para que sea onMouseEnter en lugar de onmouseenter.

Para cambiar la clase condicionalmente en React, necesitas manejar el estado del componente y actualizarlo cuando ocurra el evento onMouseEnter. Luego, basado en ese estado, puedes cambiar la clase CSS en tus elementos.

Asegúrate también de que estás utilizando la sintaxis correcta de className en lugar de classname en tus elementos JSX.

Aquí hay un ejemplo de cómo podrías modificar tu código para manejar el evento onMouseEnter y cambiar la clase condicionalmente en React:

```javascript import React, { Component } from 'react';

class TuComponente extends Component { constructor(props) { super(props); this.state = { selectedReportId: null }; }

onClickReportRow = reportId => {
    this.setState({ selectedReportId: reportId });
}

showPopUp = () => {
    // Aquí puedes implementar la lógica para mostrar el pop-up
}

render() {
    const { filteredVehicles } = this.props;
    const { selectedReportId } = this.state;

    return (
        <td className="reportCard">
            {filteredVehicles.map(t =>
                <tr
                    className={`cardList ${t.reportId === selectedReportId ? 'previewbtndisplayblock' : 'previewbtndisplaynone'}`}
                    onMouseEnter={() => this.onClickReportRow(t.reportId)}
                >
                    <span className="CardReportsName">
                        <p className="reportNameP">{t.reportName}</p>
                    </span>
                    <span>
                        <em aria-hidden="true" className="fa fa-info" onClick={this.showPopUp} />
                    </span>
                </tr>
            )}
        </td>
    );
}

}

export default TuComponente; ```

Con estos cambios, deberías poder cambiar la clase condicionalmente en función del evento onMouseEnter en React. Asegúrate de ajustar el código a tus necesidades específicas. Espero que esto te ayude a resolver el problema. Si necesitas más ayuda, no dudes en preguntar.

Respondida el Dec 18, 2020 a las 05:44 - por Gpt

{t.reportName}

Gemini · Answer

Problema: La clase CSS condicional no se está cambiando correctamente en los eventos onMouseEnter y onMouseOver, pero sí funciona en el evento onClick. Solución: Es posible que el problema esté relacionado con la sintaxis de la función de flecha en el evento onMouseEnter. Código corregido: jsx this.onClickReportRow(t.reportId)}> En la función de flecha, el paréntesis después del parámetro t.reportId faltaba originalmente. Este paréntesis es esencial para que la función de flecha se ejecute correctamente. Explicación: En React, los eventos se manejan mediante funciones de flecha. Sin los paréntesis, la función de flecha no se ejecutará cuando el evento se active. En su lugar, se evaluará el valor de t.reportId y se devolverá como el resultado del atributo onMouseEnter. Al agregar los paréntesis, la función de flecha se ejecutará cuando se active el evento onMouseEnter y se llamará a this.onClickReportRow(t.reportId) correctamente. Información adicional: Es una buena práctica usar funciones de flecha al manejar eventos en React para evitar problemas de alcance. Asegúrate de que se utilicen los nombres de clase CSS correctos en los atributos className.

Clase de css condicional no está cambiando en el ratón OnEnter o ratón OnOver en reactjs

3 Respuestas:

Hello CodeSandbox

Start editing to see some magic happen!