Jak używać onClick z divami w React.js

Question

Tworzę bardzo prostą aplikację, w której można kliknąć kwadratowe elementy div, aby zmienić ich kolor z białego na czarny. Mam jednak problem. Chciałbym użyć funkcji onClick, aby umożliwić użytkownikowi kliknięcie kwadratu w celu zmiany jego koloru, ale wydaje się, że nie działa. Próbowałem już używać zakresów i pustych znaczników p, ale to też nie działa.

Oto kod w pytaniu:

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

Oto link do mojego małego projektu na CodePen. http://codepen.io/anfperez/pen/RorKge

Answer 1

Działa

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

iw swoim CSS, usuwać style masz i umieścić ten

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

Musisz stylizować rzeczywisty dział, do którego dzwonisz onClick na. Podaj div className, a następnie nadaj mu styl. Należy również pamiętać, aby usunąć tę blokadę, gdzie jesteś renderingu App do DOM, aplikacja nie jest zdefiniowana

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

Answer 2

Twoje pudełko nie ma rozmiaru. Jeżeli ustawić szerokość i wysokość, to działa dobrze:

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

Właśnie potrzebowałem prostego testowania przycisk do react.js. Oto co zrobiłem i zadziałało.

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

Działa to również:

Właśnie zmienił z this.state.color==='white'?'black':'white'.

Można również wybrać kolor z rozwijanych wartości i zaktualizować w miejsce "czarny";

(CodePen)