如何在React.js中使用onClick與div div

我正在製作一個非常簡單的應用程序，您可以在其中點擊方形div以將其顏色從白色更改爲黑色。但是，我遇到了麻煩。我想使用onClick函數來允許用戶點擊一個正方形來改變它的顏色，但它似乎沒有工作。我試過使用跨度和空p標籤，但這也不起作用。如何在React.js中使用onClick與div div

這裏是有問題的代碼：

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

來源

2016-11-10 Leia_Organa

這工作

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

您必須設計您要撥打的實際div。給div一個className然後設置它的樣式。還記得刪除此塊你在哪裏呈現App到DOM，應用程序沒有定義

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

來源

2016-11-10 20:11:13

謝謝！這是造型讓我絆倒了一下。這絕對有效！ –

不客氣，你能接受答案嗎？ –

您的包裝箱沒有尺寸。如果您設置的寬度和高度，它工作得很好：

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>

來源

2016-11-10 19:29:57 Timo

感謝蒂姆，但代碼似乎沒有工作，當我嘗試在我CodePen片段來使用它。那是因爲我的CSS文件中指定了寬度和高度？我用你的代碼編輯它，但它仍然不起作用。 –

它不起作用？我的答案中的代碼片段工作得很好。 – Timo

我只是需要一個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>); 
}

來源

2017-06-14 08:36:56

這也適用於：

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

您還可以從下拉值中選取顏色並更新以代替「黑色」;

（CodePen）

來源

2017-12-24 16:42:33

如何在React.js中使用onClick與div div

回答

相關問題