So verwenden Sie onClick mit divs in React.js

Ich mache eine sehr einfache Anwendung, in der Sie auf quadratische Divs klicken können, um ihre Farbe von Weiß auf Schwarz zu ändern. Allerdings habe ich Probleme. Ich möchte die onClick-Funktion verwenden, damit ein Benutzer auf ein Quadrat klicken kann, um seine Farbe zu ändern, aber es scheint nicht zu funktionieren. Ich habe versucht, Spans und leere p-Tags zu verwenden, aber das funktioniert auch nicht.

Hier der fragliche Code:

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'white'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({
            color: newColor
        });
    },

    render: function() {
        return (
            <div>
                <div
                    style = {{background: this.state.color}}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

Hier ist ein Link zu meinem kleinen Projekt auf CodePen.
http://codepen.io/anfperez/pen/RorKge

Um Sie zu beruhigen, die onClick Das Ereignis funktioniert mit Divs in React, also überprüfen Sie Ihre Codesyntax.

Diese sind richtig:

<div onClick={doThis}>
<div onClick={() => doThis()}>

Diese sind falsch:

<div onClick={doThis()}>
<div onClick={() => doThis}>

(und vergessen Sie nicht, Ihre Tags zu schließen … Achten Sie darauf:

<div onClick={doThis}

fehlendes schließendes Tag auf dem div)

Das funktioniert

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'white'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({ color: newColor });
    },

    render: function() {
        return (
            <div>
                <div
                    className="box"
                    style={{background:this.state.color}}
                    onClick={this.changeColor}
                >
                    In here already
                </div>
            </div>
        );
    }
});

ReactDOM.render(<Box />, document.getElementById('div1'));
ReactDOM.render(<Box />, document.getElementById('div2'));
ReactDOM.render(<Box />, document.getElementById('div3'));

und löschen Sie in Ihrem CSS die Stile, die Sie haben, und fügen Sie diese ein

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  float: left;
}

Sie müssen das eigentliche div, das Sie aufrufen, formatieren onClick an. Geben Sie dem div einen Klassennamen und gestalten Sie es dann. Denken Sie auch daran, diesen Block dort zu entfernen, wo Sie rendern App in die dom, App ist nicht definiert

ReactDOM.render(<App />,document.getElementById('root'));

Der folgende Code funktioniert jetzt !!!

const test = () => {
const onClick = () => console.log('hi');

return (
<div onClick={onClick} aria-hidden="true">
  Content here
</div>
)};

Ihre Box hat keine Größe. Wenn Sie die Breite und Höhe einstellen, funktioniert es einwandfrei:

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'black'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({
            color: newColor
        });
    },

    render: function() {
        return (
            <div>
                <div
                    style = {{
                        background: this.state.color,
                        width: 100,
                        height: 100
                    }}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

ReactDOM.render(
  <Box />,
  document.getElementById('box')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='box'></div>

Dies kann zwar mit React erfolgen, beachten Sie jedoch, dass die Verwendung von onClicks mit divs (anstelle von Buttons oder Anchors und anderen, die bereits Verhaltensweisen für Klickereignisse haben) eine schlechte Praxis ist und nach Möglichkeit vermieden werden sollte.

Das funktioniert auch:

Ich habe gerade mit geändert this.state.color==='white'?'black':'white'.

Sie können die Farbe auch aus Dropdown-Werten auswählen und anstelle von „Schwarz“ aktualisieren;

(CodePen)

Ich brauchte nur eine einfache Testschaltfläche für „react.js“. Hier ist, was ich getan habe und es hat funktioniert.

function Testing(){
 var f=function testing(){
         console.log("Testing Mode activated");
         UserData.authenticated=true;
         UserData.userId='123';
       };
 console.log("Testing Mode");

 return (<div><button onClick={f}>testing</button></div>);
}