如何在 React.js 中将 onClick 与 div 一起使用 [英] How to use onClick with divs in React.js

问题描述

我正在制作一个非常简单的应用程序，您可以在其中单击方形 div 将它们的颜色从白色更改为黑色.但是，我遇到了麻烦.我想使用 onClick 函数来允许用户点击一个正方形来改变它的颜色，但它似乎没有工作.我尝试过使用 spans 和空 p 标签，但这也不起作用.

这里是有问题的代码:

var Box = React.createClass({获取初始状态:函数(){返回 {白颜色'};},改变颜色:函数(){var newColor = this.state.color == 'white' ?'黑，白';这个.setState({颜色:新颜色});},渲染:函数(){返回 (

这是我在 CodePen 上的小项目的链接.http://codepen.io/anfperez/pen/RorKge

解决方案

这行得通

var Box = React.createClass({获取初始状态:函数(){返回 {白颜色'};},改变颜色:函数(){var newColor = this.state.color == 'white' ?'黑，白';this.setState({ 颜色: newColor });},渲染:函数(){返回 (

在你的css中，删除你拥有的样式并放上这个

.box {宽度:200px；高度:200px；边框:1px纯黑色；向左飘浮;}

您必须设置您正在调用 onClick 的实际 div 的样式.给 div 一个 className，然后设置它的样式.还记得删除你将 App 渲染到 dom 的这个块，App 没有定义

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

I'm making a very simple application where you can click on square divs to change their color from white to black. However, I'm having trouble. I'd like to use the onClick function to allow a user to click on a square to change its color, but it doesn't seem to be working. I've tried using spans and empty p tags, but that doesn't work either.

Here is the code in 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>
        );
    }
});

Here's a link to my small project on CodePen. http://codepen.io/anfperez/pen/RorKge

解决方案

This works

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

and in your css, delete the styles you have and put this

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

You have to style the actual div you are calling onClick on. Give the div a className and then style it. Also remember to remove this block where you are rendering App into the dom, App is not defined

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

这篇关于如何在 React.js 中将 onClick 与 div 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！