#7 打开和关闭电脑


  • 0

    通过了,大家可以拿去参考

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

  • 0

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

  • 0

    @ScriptOJ 怎么显示的是 显示器一开始应该显示 '显示器关了',但是显示了 ' 显示器关了'


  • 0

    class Computer extends Component {
    constructor () {
    super()
    this.state = {
    status: 'off'
    }
    }
    clickMe () {
    this.setState({
    status: this.state.status === 'on' ? 'off' : 'on'
    })
    }
    render () {
    const on = '显示器亮了'
    const off = '显示器关了'
    return (
    <div>
    <button onClick={this.clickMe.bind(this)}>开关</button>
    <Screen showContent={this.state.status === 'on' ? on : off}></Screen>
    </div>
    )
    }
    }

    class Screen extends Component {
    static defaultProps = {
    showContent: '无内容'
    }
    render () {
    return (
    <div className='screen'>{this.props.showContent}</div>
    )
    }
    }


  • 0

    Must call super constructor in derived class before accessing 'this' or returning from derived constructor

    这是什么错误,改如何改

    class Computer extends Component {
    constructor(){
    this.state = {
    status: off
    }
    }
    clicked(){
    this.state.status = !this.state.status
    }
    render () {
    return (
    <div>
    <button onClick={this.clicked}>开关</button>
    <Screen showContent = "this.state.status" />
    </div>
    )
    }
    }

    class Screen extends Component {
    constructor(props){
    super(props);
    }
    static defaultProps = {
    showContent: '无内容',
    }

    render () {
    var showContent = this.props.status == of ? this.showContent = '显示器亮了' : '显示器关了';
    return (
    <div className='screen'>{showContent}</div>
    )
    }
    }


  • 0

    这样可以

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

  • 0

    class Computer extends Component {
    constructor () {
    super()
    this.state = {
    status : 'off',
    showContent: '显示器关了'
    }
    }

    handleClickOnComputer () {
    this.setState({
    status: this.state.status === 'off' ? 'on' : 'off',
    showContent: this.state.status === 'off' ? '显示器亮了' : '显示器关了'
    })
    }

    render () {
    return (
    <div>
    <button onClick={this.handleClickOnComputer.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

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

    @Vayne-Sun#7 打开和关闭电脑 中说:

    class Computer extends Component {
      constructor(){
        super()
        this.state = {
          status:'off'
        }
      }
      
      changeStatus(){
        this.setState(
          {status:this.state.status=='off'?'on':'off'}
        )
        
      }
      
      render () {
        return (
          <div>
            <button onClick={this.changeStatus.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 Component {
      constructor () {
        super()
        this.state = {
          isOn: false,
          status: 'off',
          show: "显示器关了"
        }
      }
      
      switch () {
        this.setState({
          isOn: !this.state.isOn,
          status: (this.state.isOn === false) ? 'on' : 'off',
          show: (this.state.isOn === false) ? '显示器亮了' : '显示器关了'
        })
      }
      
      render () {
        return (
          <div>
            <Screen showContent={this.state.show}/>
            <button onClick={this.switch.bind(this)}>开关</button>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    @dcbryant 可以用。
    Screen组件中用
    static defaultProps 更好点


  • 0

    @dcbryant
    class Computer extends Component {
    constructor(props){
    super(props)
    this.state = {
    status: 'off' // 电脑状态,on:开,off:关
    }
    }

    /**

    • 按钮点击触发方法
      */
      handleClick(e){
      this.setState({status: Object.is(this.state.status, 'off') ? 'on': 'off'})
      }

    render () {
    return (
    <div>
    <button onClick={this.handleClick.bind(this)}>开关</button>
    <Screen showContent={Object.is(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 Component {
      constructor () {
        super()
        this.state = {
          status : 'off',
        }
      }
      handleClickOnChange(){
        this.setState({
          status: this.state.status=='on'?'off':'on',
        })
      }
      render () {
        return (
          <div>
            <Screen showContent={this.state.status=='on'?'显示器亮了':'显示器关了'}/>
            <button onClick={this.handleClickOnChange.bind(this)}>开关</button>
          </div>
        )
      }
    }
    
    class Screen extends Component {
     static defaultProps = {showContent:"无内容"}
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    

  • 0

    借鉴了下maroon的代码,通过验证了:

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


  • 0

    class Computer extends Component {
    constructor(){
    super();
    this.state = {
    status:"off"
    };
    }

    handleChangeStatus(){
    this.setState(function(prevState){
    let status = "on";
    if(prevState.status == "on"){
    status = "off";
    }
    return {
    status
    }
    })
    }
    render () {
    return (
    <div>
    <button onClick ={this.handleChangeStatus.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'
        }
        this.switchit = this.switchit.bind(this)
      }
      switchit(){
        if(this.state.status === 'on'){
          this.setState({
            status: 'off'
          })
        }else{
          this.setState({
            status: 'on'
          })
        }
      }
      render () {
        return (
          <div>
            <button onClick={this.switchit}>开关</button>
            <Screen showContent={this.state.status} />
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent: '无内容'
      }
      render () {
        let sign = this.props.showContent
        let con = sign === 'on'? '显示器亮了':'显示器关了'
        return (
          <div className='screen'>{con}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
      constructor() {
        super()
        this.state={
          status: 'off',
          content: '显示器关了'
        }
      }
      handleClick() {
        let status = this.state.status === 'off'?'on':'off'
        
        this.setState({status: status, content: status === 'off'?'显示器关了':'显示器亮了'})
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick.bind(this)}>开关</button>
            <Screen showContent={this.state.content} />
          </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(){
    this.setState({
    status:(this.state.status=='off'?'on':'off')
    })
    }
    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 App extends Component {
      constructor() {
        super()
        this.state={
          status : "off"  //default
        }
      }
      tabSwitch(){
        this.setState({
          status : this.state.status === "off"? "on":"off"  
        })
      }
      render () {
        return (
          <div>
            <Screen showContent = {this.state.status}/>
            <button onClick={this.tabSwitch.bind(this)}>
              {this.state.status === "off"? "关":"开"}
            </button>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      static defaultProps = {
        showContent : '无内容'
      }
      constructor(props){
        super(props)
      }
      render () {
        return (
          <div className='screen'>{this.props.showContent === "off"? "显示器关了":"显示器亮了"}</div>
        )
      }
    }
    

  • 0

    class Computer extends Component {
    constructor(){
    super();
    this.state = { status: 'off'}
    this.on = false;
    }
    handle(){
    this.on = !this.on;
    this.setState({
    status : this.on === true ? 'on' : 'off'
    });
    }

    render () {
    return (
    <div>
    <button onClick={this.handle.bind(this)}>开关</button>
    <Screen status = {this.state.status}/>
    </div>
    )
    }
    }

    class Screen extends Component {
    static defaultProps = {
    showContent: '无内容'
    }

    render () {
    return (
    <div className='screen' >{this.props.status === 'on'?'显示器亮了':'显示器关了'}</div>
    )
    }
    }


登录后回复
 

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