#7 打开和关闭电脑


  • 0

    @陈小俊 我是想问一下 screen组件的showContent怎么传才会让他显示默认属性? showContent={content} 这种形式好像不行


  • 0
    administrators

    @Nico 不传就可以了


  • 0

    贴一下我的代码,hand中我setState 显示器的inner我感觉是错误的但是代码通过了。。。。

    class Computer extends Component {
      constructor () {
     super()
        this.state = {
        status: "off",
          inner: "显示器关了" }
      }
      
      hand () {
        this.setState({status: this.state.status=="off" ? "on" : "off", inner: this.state.status=="off" ? "显示器亮了" : "显示器关了"})
      }
      
      render () {
        return (
          <div>
            <button onClick={this.hand.bind(this)}>开关</button>
            <Screen showContent={this.state.inner}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {showContent: "无内容"}
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }

  • 0

    @两首诗
    第十小结回顾:
    React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到 state 当中,然后再触发组件更新。

    所以我hand虽然改变了status的值但是此时还是在队列中值并没有改变,所以后面反向判断代码通过,但是理解起来太绕弯,这里把hand改为

    hand () {
        this.setState({status: this.state.status=="off" ? "on" : "off", 
        inner: this.state.inner=="显示器关了" ? "显示器亮了" : "显示器关了"})
      }
    

    这样应该是没有问题了,不知道理解的对不对


  • 0

    class Computer extends Component {
      constructor(){
        super()
        this.state={
          status:'off',
          showContent:'显示器关了',
        }
      }
      
      handleOnclick(){
            console.log(this)
            this.state.status ==='off'? this.setState({
                status:'on',
                showContent:'显示器亮了'
            }):this.setState({
                status:'off',
                showContent:'显示器关了'
            })
        }
      render () {
        return (
          <div>
            <button onClick={this.handleOnclick.bind(this)}>开关</button>
            <Screen showContent={this.state.showContent} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
          showContent: '无内容',
      }
      render () {
        return (
          <div className='screen'>
            {this.props.showContent}
          </div>
        )
      }
    }
    

  • 0

    @dcbryant status状态是on和off吧 题目写明的 你这样应该不行


  • 1

    0_1497672599195_upload-7998c4aa-bd6d-48f0-9707-b8cd486ef515


  • 0

    class Computer extends Component {
      constructor(){
        super();
        this.state={status:'off'};
      }
      
      render () {
        return (
          <div>
            <button onClick={()=>this.setState({status:this.state.status == 'off' ? 'on':'off'})}>开关</button>;
            <Screen showContent={this.state.status =='off'? '显示器关了':'显示器亮了'} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {showContent:'无内容'};
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    @ScriptOJ 能帮我看看哪错了吗?0_1498645540239_upload-a468aa1e-66a8-4e6c-90e1-239b3a38e887 0_1498645550153_upload-e66d4418-4cdb-49a7-9a5c-957f37a463d3


  • 0

    @ScriptOJ 一开始以为屏幕上是默认显示 无内容,“显示器关了”和“显示器亮了”只是作为开关点击时的状态显示而已。于是我这样子写:

    class Computer extends Component {
        constructor () {
            super()
            this.state = {
                status: 'off',
                statusPmt: '显示器关了',
            }
            let showContent
        }
        
        computerBtn = () => {
            this.setState(
                {
                    status: (this.state.status === 'off') ? 'on' : 'off'
                },
                () => {
                    if(this.state.status === 'on') {
                        this.setState({
                            statusPmt: '显示器亮了'
                        })
                    }
                    else {
                        this.setState({
                            statusPmt: '显示器关了'
                        })
                    }
                }
            )
        }
        render () {
            return (
            <div>
                <button onClick={this.computerBtn}>开关</button>
                <div>显示器状态:{this.state.statusPmt}</div>
                <Screen />
            </div>
            )
        }
    }
    
    class Screen extends Component {
        static defaultProps = {
            showContent: '无内容',
        }
        render () {
            return (
                <div className='screen'>
                    {this.props.showContent}
                </div>
            )
        }
    }
    

  • 0

    class Computer extends Component {
      constructor () {
        super();
        this.state = {
          status: 'off'
        };
      }
      handleClick() {
        let sts = (this.state.status == 'on' ? 'off' : 'on');
        this.setState({status: sts});
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick.bind(this)}>开关</button>
            <Screen showContent={this.state.status == 'on' ? '显示器亮了' : '显示器关了'}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
      constructor () {
        super();
        this.state = {
          status: 'off'
        };
      }
      handleClick() {
        let sts = (this.state.status == 'on' ? 'off' : 'on');
        this.setState({status: sts});
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick.bind(this)}>开关</button>
            <Screen showContent={this.state.status == 'on' ? '显示器亮了' : '显示器关了'}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
      constructor(props){
         super(props)
         this.state = {
            status: "off",
            flag:false,
            showContent:'无内容'
         }
      }
      swicthBar(){
        let state = this.state;
         this.setState({
            flag:!state.flag
         });
         if(state.flag){
            this.setState({
              status:"on"
            })
         }else{
            this.setState({
                status:"off"
            })
         }
    
         if(state.status == "on"){
              state.showContent = "显示器亮了";
          }else if(state.status == "off"){
            state.showContent = "显示器关了";
          }else{
            state.showContent = "无内容"
        }
    
      }
      render () {
        let state = this.state;
        
        return (
          <div>
            <button onClick={this.swicthBar.bind(this)}>{state.showContent}</button>
            <Screen showContent={state.showContent}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      constructor(props){
        super(props)
      }
      render () {
        return (
          <div className='screen'>
              {this.props.showContent}
          </div>
        )
      }
    }

  • 0

    class Computer extends Component {
      constructor(props) {
        super(props);
        this.state = {status: 'off'};
      }
      
      switchStatus = () => {
        this.setState((prevState) => {
          return {status: (prevState.status) == 'off' ? 'on': 'off'};
        });
      }
      
      render () {
        return (
          <div>
            <Screen showContent={this.state.status == 'on' ? '显示器亮了' : '显示器关了'}/>
            <button onClick={this.switchStatus}>开关</button>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      
      constructor(props) {
        super(props);
      } 
      
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    @xugl

      handleClickOnLikeButton () {
        this.setState({ count: 0 }) // => this.state.count 还是 undefined
        this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
        this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
      }
    

    参考组件的 state 和 setState此章节


  • 0

    class Computer extends Component {
      constructor (props) {
        super(props)
        this.state = {
          status: 'off'
        }
      }
      openBtn () {
        this.setState ({
          status: this.state.status == 'off' ? 'on' :'off'
        })
        
      }
      render () {
        return (
          <div>
            <button onClick={this.openBtn.bind(this)}>开关</button>
            <Screen showContent={this.state.status == 'off' ? '显示器关了' : '显示器亮了'} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      constructor (props) {
        super (props)
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
      constructor (props) {
        super(props)
        this.state = {
          status: 'off'
        }
      }
      openBtn () {
        this.setState ({
          status: this.state.status == 'off' ? 'on' :'off'
        })
        
      }
      render () {
        return (
          <div>
            <button onClick={this.openBtn.bind(this)}>开关</button>
            <Screen showContent={this.state.status == 'off' ? '显示器关了' : '显示器亮了'} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      constructor (props) {
        super (props)
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }

  • 0

    class Computer extends Component {
      constructor (){
        super();
        // this.state.status = "off";
        this.state = {
          status: "off"
        }
      }
      clickfunc(){
        this.setState({
          status: this.state.status === "on" ? "off" : "on"
        });
      }
      render () {
        return (
          <div>
            <button onClick = {this.clickfunc.bind(this)}>开关</button>
            <Screen showContent={this.state.status === "on" ? "显示器亮了" : "显示器关了"}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: "无内容"
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
      constructor () {
        super()
        this.state = { status: 'off' }
      }
      statusChange(){
        this.setState({
          status: this.state.status=='off'?'on':'off'
        })
      }
      render () {
        return (
          <div>
            <button onClick={this.statusChange.bind(this)}>开关</button>
            <Screen showContent={this.state.status=='off'?'显示器关了':'显示器亮了'} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
    
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    import React,{Component} from 'react'
    
    export class Computer extends Component{
        constructor(){
            super();
            this.state={
                status:'off',
                showContent:'无状态'
            };
        };
        onBtnClick(){
            if(this.state.status == 'off'){
                this.setState={
                    status:'on',
                    showContent:'显示器关了'
                }
            }
            if(this.state.status == 'on'){
                this.setState={
                    status:'off',
                    showContent:'显示器开了'
                }
            }
        }
        render(){
          return <div>
              <button onClick={()=>{this.onBtnClick()}}>
              {this.state.status}
              </button>
              <Screen showContent={this.state.showContent} />
          </div>
        };
    }
    export class Screen extends  Component{
        constructor(){
            super();
        };
        render(){
            const showContent=this.props.showContent;
            return <div className="screen">
                {showContent}
            </div>
        }
    }
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待