Cách sử dụng onClick với số div trong React.js

Question

Tôi đang tạo một ứng dụng rất đơn giản, nơi bạn có thể nhấp vào div vuông để thay đổi màu của chúng từ trắng sang đen. Tuy nhiên, tôi đang gặp rắc rối. Tôi muốn sử dụng chức năng onClick để cho phép người dùng nhấp vào một hình vuông để thay đổi màu của nó, nhưng nó dường như không hoạt động. Tôi đã thử sử dụng các nhịp và các thẻ p trống, nhưng nó cũng không hoạt động.

Đây là mã trong câu hỏi:

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

Dưới đây là một liên kết đến dự án nhỏ của tôi trên CodePen. http://codepen.io/anfperez/pen/RorKge

Answer 1

này hoạt động

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

và trong css của bạn, xóa các phong cách bạn có và đưa

này

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

Bạn phải tạo kiểu div thực tế bạn đang gọi onClick bật. Cung cấp cho div một className và sau đó phong cách nó. Ngoài ra, hãy nhớ xóa khối này nơi bạn đang hiển thị App vào trong dom, Ứng dụng không được xác định

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

Answer 2

Hộp của bạn không có kích thước. Nếu bạn thiết lập chiều rộng và chiều cao, nó hoạt động tốt:

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

Tôi chỉ cần một nút kiểm tra đơn giản cho react.js. Đây là những gì tôi đã làm và nó hoạt động.

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

này cũng hoạt động:

Tôi chỉ thay đổi với this.state.color==='white'?'black':'white'.

Bạn cũng có thể chọn màu từ giá trị thả xuống và cập nhật thay cho 'đen';

(CodePen)