web-dev-qa-db-fra.com

Comment utiliser onClick avec divs dans React.js

Je fais une application très simple où vous pouvez cliquer sur les divs carrés pour changer leur couleur du blanc au noir. Cependant, j'ai des problèmes. J'aimerais utiliser la fonction onClick pour permettre à un utilisateur de cliquer sur un carré pour en changer la couleur, mais cela ne semble pas fonctionner. J'ai essayé d'utiliser des étendues et des balises p vides, mais cela ne fonctionne pas non plus. 

Voici le code en question:

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>
        );
    }
});

Voici un lien vers mon petit projet sur CodePen . http://codepen.io/anfperez/pen/RorKge

javascriptreactjsonclickevent-handlingstate
14
Leia_Organa

Cela marche 

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'));

et dans votre css, supprimez les styles que vous avez et mettez ceci

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

Vous devez nommer la div que vous appelez onClick. Donnez à la div un className, puis appelez-la. Pensez également à supprimer ce bloc dans lequel vous rendez App dans le dom. L'application n'est pas définie.

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

Votre boîte n'a pas de taille. Si vous définissez la largeur et la hauteur, cela fonctionne parfaitement:

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

Cela fonctionne aussi:

Je viens de changer avec this.state.color==='white'?'black':'white'.

Vous pouvez également choisir la couleur dans les valeurs déroulantes et la mettre à jour au lieu de «noir»;

( CodePen )

0
shobhit garg

Je voulais juste un bouton de test simple pour react.js. Voici ce que j'ai fait et cela a fonctionné. 

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