#7 打开和关闭电脑


  • 0

    @ScriptOJ#7 打开和关闭电脑 中说:

    Computer

    class Computer extends Component {

    constructor(){
    super()
    this.state = {status : 'off'}
    }

    handleClick(){
    this.setState(
    {
    status : 'on'
    }
    )
    }
    render () {
    return (
    <div>
    <button onClick={this.handleClick.bind(this)}>开关</button>
    <Screen isOn={this.state.status}/>
    </div>
    )
    }
    }

    class Screen extends Component {

    static defaultProps = {
    onText: '显示器亮了',
    offText: '显示器关了',
    defaultText: '无内容'
    }

    render () {
    return (
    <div className='screen'>
    this.props.isOn ? == 'on' ? onText : offText : defaultText
    </div>
    )
    }
    }

    怎么样才能设置默认值呢


  • 0

    @ScriptOJ
    class Computer extends Component {
    constructor(props) {
    super(props)
    this.state = {
    status: 'off'
    }
    }

    handleClick() {
        this.setState({
            status: this.state.status === 'off' ? 'on' : 'off'
        })
    }
    
    render() {
        let showContent;
        if (this.state.status === "off") {
            showContent = '显示器关了'
        } else if (this.state.status === "on") {
            showContent = '显示器开了'
        }
        return (
            <div>
                <button onClick={() => {
                    this.handleClick()
                }}>
                    开关
                </button>
                <Screen showContent={showContent}/>
            </div>
        )
    }
    

    }

    class Screen extends Component {
    constructor(props) {
    super(props)
    }

    static defaultProps = {
        showContent: '无内容'
    }
    
    render() {
        return (
            <div>
                {this.props.showContent}
            </div>
        )
    }
    

    }

    代码通过了 但是本地测试不显示 显示器默认 无内容


  • 0

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

  • 0

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

    成功

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

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


  • 0

    ···js
    class Computer extends Component {
    constructor(){
    super()
    this.state={
    status:'off'
    }
    }
    handleonClick(){
    this.setState({
    status:this.state.status=='off'?'on':'off'
    })
    }
    render () {
    return (
    <div>
    <button onClick={this.handleonClick.bind(this)}>开关</button>
    {this.state.status=='on'?<Screen showContent='显示器亮了'/>:<Screen 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"};
      }
      handleClick = () => {
        var s = this.state.status === "on" ? "off" : "on";
        this.setState({status: s});
      }
      render () {
        var content = this.state.status === "on" ? "显示器亮了" : "显示器关了";
        return (
          <div>
            <button onClick={this.handleClick}>开关</button>
    //这个地方直接传showContent就行,不需要考虑不传入showContent的情况
            <Screen showContent = {content}/>
          </div>
        )
      }
    }
    
    class Screen extends Component {
      render () {
        return (
          <div className='screen'>{this.props.showContent}</div>
        )
      }
    }
    // 如果不传入 showContent,显示器显示 “无内容”。就是表达下面这句话的意思,而实际上并不会出现不传入showContent的情况
    Screen.defaultProps = {showContent: '无内容'};
    

登录后回复
 

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