#7 打开和关闭电脑


  • 0

    @hedu 怎么回复代码块.......


  • 0
    管理员

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

    @hedu 怎么回复代码块.......
    我帮你加上了,你自己看看我是怎么加的


  • 0

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

  • 2

    我估计我这个是最接近标准答案的。

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

    @陈小俊 我也不会复制代码块,你可以帮帮我吗


  • 0
    管理员

    @留恋阳光 好的


  • 0

    @陈小俊 我自己琢磨了一下,现在会了,不过还是谢谢


  • 0

    @ScriptOJ class Computer extends Component {

    render () {
    this.state = {
    status:false,
    content:'显示器关了'
    }

      onChange=()=>{
        this.setState({
          status:!this.state.status,
        })
      }
    return (
      <div>
        <button onClick={this.onChange}>{this.props.state?this.props.on:this.props.off}</button>
      </div>
    )
    

    }
    }

    class Screen extends Component {
    render () {
    return (
    <div className='screen'>
    <Computer
    on ="开"
    off="关"
    />
    </div>
    )
    }
    }


  • 0

    @ScriptOJ class Computer extends Component {

    render () {
       this.state = {
         status:false,
         content:'显示器关了'
       }
      
      handleTagger=()=>{
        this.setState({
          status:!this.state.status,
        })
      }
    return (
      <div>
        <button onClick={this.handleTagger}>{this.props.state?
      this.props.on:this.props.off}</button>
      </div>
        )
      }
    }
    
     class Screen extends Component {
        render () {
          return (
            <div className='screen'>
                <Computer 
                    on ="开"
                    off="关"
                />
            </div>
          )
        }
      }

  • 0

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

  • 0

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

  • 0

    class Screen extends Component{
    static defaultProps = {
    showContent : "无内容"
    }
    constructor(){
    super();
    this.state = {
    }

    }
    onClick(){
    	this.setState({
    	})
    }
    render(){
    	console.log(this.props.showContent);
    	return <div>
    		<h2>{this.props.showContent}</h2>
    	</div>
    }
    

    }
    export default class App extends React.Component{
    constructor(){
    super();
    this.state = {
    changeStatus : false,
    status : "off"
    }
    }

    onClick(){
    	this.setState({
    		changeStatus : !this.state.changeStatus,
    		status : !this.state.changeStatus ? "on" : "off"
    	})
    }
    render(){
    	return <div>
    		<LickButton
    			showContent = {this.state.status == "on" ? "显示器亮了" : "显示器关了"}
    		/>
    		<button onClick={this.onClick.bind(this)}>点击切换</button>
    	</div>
    }
    

    }


  • 0

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

  • 0

    总感觉把 state 传入 props 里面有点怪

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

登录后回复
 

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