React.js 如何在 div 中使用 onClick

Question

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

这里是有问题的代码：

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

这是我在 CodePen 上的一个小项目 link。 http://codepen.io/anfperez/pen/RorKge

Answer 1

您的盒子没有尺寸。如果你设置宽度和高度，它工作得很好：

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>

Answer 2

这个有效

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

并在您的 css 中，删除您拥有的样式并将此

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

您必须为调用 onClick 的实际 div 设置样式。给 div 一个类名，然后设置样式。还请记住将渲染 App 的块移除到 dom，App is not defined

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

Answer 3

我只需要一个 react.js 的简单测试按钮。这是我所做的并且有效。

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

Answer 4

这也有效：

我刚刚更改为 this.state.color==='white'?'black':'white'。

您还可以从下拉值中选择颜色并更新以代替 'black'；

(CodePen)

Answer 5

对于未来的 google 员工 （现在已有数千人用 google 搜索了这个问题）：

为了让您放心，onClick 事件在 React 中确实与 divs 一起工作，因此 double-check 您的代码语法。

这些是正确的：

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

这些是错误的：

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

（别忘了关闭你的标签...注意这个：

<div onClick={doThis}

div)

缺少结束标记

Answer 6

虽然这可以通过 React 来完成，但请注意，将 onClicks 与 div（而不是 Buttons 或 Anchors，以及其他已经具有点击事件行为的行为）一起使用是不好的做法，应尽可能避免。

Answer 7

以下代码现在可以使用了！！！

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

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

React.js 如何在 div 中使用 onClick

How to use onClick with divs in React.js

javascript

state

onclick

event-handling

reactjs