web-dev-qa-db-ja.com

React.jsのdivでonClickを使用する方法

正方形の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

javascriptreactjsonclickevent-handlingstate
25
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;
}

onClickを呼び出している実際のdivのスタイルを設定する必要があります。 divにclassNameを指定し、スタイルを設定します。また、Appをdomにレンダリングしているこのブロックを削除することを忘れないでください。Appは定義されていません

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

あなたの箱にはサイズがありません。幅と高さを設定すると、うまく機能します：

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>
2
Timo

これも機能します：

this.state.color==='white'?'black':'white'で変更しました。

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

（ CodePen ）

0
shobhit garg

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>);
}
0
Matthias Liszt