wake-up-neo.net

Verwendung von 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ß in Schwarz zu ändern. Ich habe jedoch Probleme. Ich möchte die Funktion onClick verwenden, damit ein Benutzer auf ein Quadrat klicken kann, um seine Farbe zu ändern, aber es scheint nicht zu funktionieren. Ich habe versucht, Spannweiten und leere p-Tags zu verwenden, aber das funktioniert auch nicht. 

Hier ist 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

javascriptreactjsonclickevent-handlingstate
14
Leia_Organa

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 Ihrer CSS-Datei die von Ihnen verwendeten Stile, und fügen Sie diese

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

Sie müssen das tatsächliche div, für das Sie onClick aufrufen, formatieren. Geben Sie dem div einen Klassennamen und stylen Sie es. Denken Sie auch daran, diesen Block zu entfernen, an dem Sie App in den Dom übertragen, App ist nicht definiert

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

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

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>

2
Timo

Das funktioniert auch:

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

Sie können auch die Farbe aus den Dropdown-Werten auswählen und anstelle von "Schwarz" aktualisieren.

( CodePen )

0
shobhit garg

Ich brauchte nur einen einfachen Testknopf für das Projekt "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>);
}
0
Matthias Liszt