Article From:https://segmentfault.com/q/1010000011709869
Question:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title></title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
   <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

<style media="screen">
  .box {width:200px;height:300px;background:#CCC}
</style>
<script type="text/babel">
class ShowHide extends React.Component{
  constructor(...args){
    super(...args);
     
    this.state={display:'block',backgroundColor:"red"};
   
    
  }

  fn(){
   
    this.setState({
      display: this.state.display=='block'?'none':'block'
      backgroundColor:this.state.backgroundColor=='red'?'blue':'red'
    });
  }

  render(){
    return <div>
      <input type="button" value="Show hidden "onClick={this.fn.bind (this)} />< div className= "box" style={{display: this.state.dIsplay}}> < /div>< /div>}}Window.onload=function () {Var oDiv=document.getElementById ('div1');ReactDOM.render (< ShowHide/>ODiv);};< /script>

</head>
<body>

<div id="div1">

</div>

</body>
</html>

Answer 0:

Two places:
There’s a comma missing.

fn(){
    this.setState({
      display: this.state.display=='block'?'none':'block',
      backgroundColor:this.state.backgroundColor=='red'?'blue':'red'
    });
  }

Background color:

<div className="box" style={{display: this.state.display,backgroundColor:this.state.backgroundColor}}></div>

The background is blue. Look in the F12.

Answer 1:

What do you want to ask?

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *