Wie ändert man die Farbe einer Schaltfläche, wenn man mit React über die Maus fährt?

Question

Mit dem nächsten Befehl:

function createCustomInsertButton (onClick) { 
    return (
    <button style={ { color: 'yellow', padding: '5px', paddingBottom : '6px', border: '1px', background:'red' } } onClick={ onClick }>Add New User</button> 
); 
} 

habe ich einen roten Knopf, aber jedes Mal über sie meine Maus geht seine Farbe rot bleibt. Kann das im cmd geändert werden? Ich meine, wenn meine Maus über den Knopf geht, könnte ihre Farbe zu hellrot geändert werden? Die Einschränkung ist, ich kann nur reaktionsbezogene Daten verwenden (keine externen CSS-Dateien)

Answer 1

Ich glaube nicht, dass es einen Weg gibt, dies zu tun, ohne Stateful Component mit reinem React zu verwenden, es sei denn, Sie verwenden eine externe css-in js Bibliothek wie styled-components.

Wie auch immer, die Idee ist: Sie background als Staat in die Schaltfläche Komponente und befestigen onMouseEnter und onMouseLeave Zuhörer halten können die state entsprechend zu ändern. Dann können Sie sich darauf verlassen, dass React den Rest der schmutzigen Neuerrending-Arbeit für Sie erledigt.

Demo: https://codesandbox.io/s/PZB1ZxMBy

jedoch mit Stil-Komponenten für diese Art der Sache ist performanter, da es keine Inline-CSS nicht verwendet. Dieser Ansatz ist auch klarer und prägnanter. Also, wenn Sie eine Option haben, externe Bibliotheken wie styled-components zu verwenden, achten Sie darauf, es auszuprobieren.

Hier ist eine kleine Demo für Stil-Komponenten: https://codesandbox.io/s/9rZkQ0BpJ