如何在 React.js 中使用帶有 div 的 onClick

Question

我正在制作一個非常簡單的應用程序，您可以在其中單擊方形 div 將它們的顏色從白色更改為黑色。 但是，我遇到了麻煩。 我想使用 onClick 函數來允許用戶點擊一個方塊來改變它的顏色，但它似乎不起作用。 我試過使用跨度和空 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 上的小項目的鏈接。 http://codepen.io/anfperez/pen/RorKge

Answer 1

這有效

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 一個 className，然后設置它的樣式。 還要記得把你渲染App到 dom 的這個塊去掉，App 沒有定義

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

Answer 2

對於未來的谷歌人（數千人現在已經用谷歌搜索了這個問題） ：

為了讓您放心， onClick事件確實在反應中與 div 一起使用，因此請仔細檢查您的代碼語法。

這些是對的：

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

這些是錯誤的：

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

（不要忘記關閉你的標簽......注意這一點：

<div onClick={doThis}

div 上缺少結束標記）

Answer 3

你的盒子沒有尺寸。 如果你設置寬度和高度，它工作得很好：

 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 4

以下代碼現在有效！！！

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

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

Answer 5

雖然這可以通過 react 來完成，但請注意，將 onClicks 與 div（而不是按鈕或錨點，以及其他已經具有點擊事件行為的）一起使用是不好的做法，應該盡可能避免。

Answer 6

我只需要一個簡單的 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 7

這也有效：

我只是改變了this.state.color==='white'?'black':'white' 。

您還可以從下拉值中選擇顏色並更新為“黑色”；

(代碼筆)