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

012と呼んでいる実際の部門のスタイルを設定する必要がありますがオンです。 divにclassNameを与え、それをスタイルする。また、あなたがDOMにAppをレンダリングしている。このブロックを削除することを忘れないでください、アプリは、私はちょうどreact.jsのための簡単なテストボタンを必要

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

Answer 2

あなたの箱にはサイズがありません。あなたは幅と高さを設定した場合、それだけで正常に動作します：

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 3

が定義されていません。ここに私がやったことがあり、それは働いた。

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'で変更します。

ドロップダウン値から色を選択し、「黒」の代わりに更新することもできます。

（CodePen）