Zugriff auf den Elementknoten in react redux

Question

Wie kann ich auf das Element li im Click-Handler zugreifen, um eine Klasse hinzuzufügen, wenn darauf geklickt wird?

const Type = React.createClass({ 
    clickHandler: function() { 
    ... 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` 
    return (
     <li 
     onClick={this.clickHandler} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Answer 1

Wenn Sie irgendwelche Daten des li erhalten möchten Sie gerade in dem Aufruf der Event-Funktion hinzufügen könnte, wenn das Element hinzugefügt wird. Sagen Sie bitte classType in onClick zugreifen möchten:

const Type = React.createClass({ 
    clickHandler: function (classType) { 
    /* Do something with the li classType */ 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` 
    return (
     <li 
     onClick={() => this.clickHandler(classType)} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Answer 2

Die „React-ful“ Weg, dies zu tun wäre, um zu speichern, die li Klassennamen oder Status in der Komponente Zustand (oder Redux Ich denke, wenn das Ihr Ding) und modifiziere es über den Click-Handler.

const Type = React.createClass({ 
    clickHandler: function() { 
    this.setState({wasClicked: true}); 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` + (this.state.wasClicked ? " some-new-class-name" : " ") 
    return (
     <li 
     onClick={this.clickHandler.bind(this)} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Beachten Sie, dass der „diesen“ Umfang an clickhandler zu binden (um Zugang zu this.setState), wenn Sie ES6 verwenden.