#7 打开和关闭电脑


  • 0
    administrators

    @Qinhua_Zhao 代码块可以用 ``` 包裹起来,我帮你改了


  • 0

    @胡子大哈 谢谢分享


  • 0

    class Computer extends Component {
      constructor(props) {
        super(props)
        this.state = {
          status: 'off'
        }
      }
      
      handleButton() {
        const newStatus = this.state.status === 'off'? this.state.status = 'on' : this.state.status = 'off'
        this.setState({status: newStatus})
      }
      render () {
        return (
          <div>
            <button onClick={this.handleButton.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

    @胡子大哈 this.setState({status: this.state.status == 'off' ? 'on' : 'off'})我的第一想法是this.setState({this.state.status == 'off' ? 'on' : 'off'}) 为什么这样不可以呢?0_1495244993972_upload-f034bb6f-a062-47ed-a833-914c139d6848


  • 0
    administrators

    @还好侑脉动 这是不合法的语法,JavaScript 没有这种语法


  • 0

    @胡子大哈 哦 谢谢作者大大了 ,没想到这么快回复, 我其实已经过了一遍阮大大的教程 ,再看您的 感觉大是一片新天地 赞赞赞


  • 0
    administrators

    @还好侑脉动 👍共同进步


  • 0
    管理员

    分享下代码,理解了题目意思就好搞了:

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

  • 0

    @陈小俊 你这个比我写的好,谢谢分享,我自己写的还没跟屏幕文字联动起来,
    但是我发现你这个有个问题,多点两次鼠标,屏幕就会在“无内容”和”显示器亮了‘之间切换了。而正确的应该是在“关了”和“亮了”之间切换吧,是不是应该加入prevState来控制了?


  • 0
    管理员

    @Hazel 我这里疯狂点都不出现这个问题呀


  • 0

    @陈小俊 您是对的,我找到错误点了,content=‘关了’,这里等号我写成了冒号


  • 0
    管理员

    @Hazel


  • 0

    @Qinhua_Zhao 嗯嗯,我知道了,多谢。前几天一直没上来,没看到


  • -1

    @陈小俊 参考了你的code ,将content放到Computer组件下,再以state动态传到Screen!

    0_1495548658389_upload-edecd1e9-b587-4038-bef6-906eca8dbf0b


  • 0
    管理员

    @绯色琉璃 哈 可以。
    不过有个小建议:
    onClick={ this.handleComputer.bind(this) }这种写法可以改成
    onClick={()=>{ this.handleComputer() }}
    或者在constructo里绑定

    constructor(props) {
        super(props);
        this.state = {message: 'Hello!'};
        // This line is important!
        this.handleClick = this.handleClick.bind(this);
      }
    

    关于bind:
    官网链接link text


  • 0

    class Computer extends Component {
      constructor(props){
        super(props);
        this.state={
          status:'off'
        }
      }
      switchState(){
        this.setState({
          status:this.state.status=='off'?'on':'off'
        })
      }
      render () {
        return (
          <div>
            <button onClick={this.switchState.bind(this)}>开关</button>
            <Screen showContent={this.state.status=='off'?'显示器关了':'显示器亮了'}></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'
        }
      }
      
      toggleSwitch () {
        if (this.state.status === 'off') {
            this.setState({ status: 'on'})
        } else if (this.state.status === 'on') {
            this.setState({ status: 'off'})
        }
      }
      
      render () {
        return (
          <div>
            <button onClick={this.toggleSwitch.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

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

    请问,第一次打开就显示电脑关了,
    初次打开的时候,怎么样才能实现这句话?

    0_1496738382364_upload-cbd08839-5b42-455a-9725-1aec2953956a


  • 0
    管理员

    @Nico 代码没问题啊,你再提交试试?


  • 0

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

登录后回复
 

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