react 02 component state click

1. Components

import React from  ' react ' ; 
import ReactDOM from  ' react-dom ' ; 
import ' ./index.css ' ; 


// Functional component return 
function Hello (props) { 
  let titleName = <p> This is the Hello subtitle </ p > return   (
     <div> <h1> Today's weather: {props.weather} </ h1> {titleName} </ div> 
  )    // a valid virtual jsx dom element must be returned in the component }
 // class component class Hi extends React.Component { 
  render () { return (
       <div> <h1> Today's weather:{this
  
  


    .props.weather} </h1></div>
    )
  }
}
ReactDOM.render(
  <div>
   <Hello weather="出太阳" />
   <Hi weather="出太阳"/>
  </div>,
  document.getElementById('root')
);

Second, the component state

import React from  ' react ' ; 
import ReactDOM from  ' react-dom ' ; 
import ' ./index.css ' ; 

// This kind of writing component cannot be automatically updated 

class Hello extends React.Component {
   // State-private 
  constructor (props) { 
    super (props) 
    this .state = { 
      time: new Date (). toLocaleTimeString () 
    } 
  } 
  // View 
  render () {
     // Report error without eslint below
    // eslint-disable-next-line   
    this.state.time = new Date (). toLocaleTimeString ()
     return (
     <div> <h1> Current time: { this .state.time} </ h1> </ div> 
    ) 
  } 
} 

ReactDOM.render (
   <div> 
    < Hello /> 
  </ div> , 
  document.getElementById ( ' root ' ) 
); setInterval (()

 => {
   // Repeated rendering of the same component will not be repeated, so re-assign 
  ReactDOM.render ( 
    < div> 
      <Hello /> 
    </ div>, 
    document.getElementById ('root') 
  ); 
}, 1000)

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Hello extends React.Component {
  // 状态-私有
  constructor(props) {
    super(props) 
    this.state = {
      time:new Date().toLocaleTimeString()
    }
    console.log(this.state.time)
  }
  // 视图
  render() {
    return (
    <div><h1>当前时间：{this.state.time}</h1></div>
    )
  }
  // 生命周期
  componentDidMount() {
    setInterval(()=>{
      // setState()
      this.setState({time:new Date().toLocaleTimeString()})
    },1000)
  }
}

ReactDOM.render(
  <div>
    <Hello />
  </div>,
  document.getElementById('root')
)

 

Three, click events

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      c1:'active',
      c2:'content'
    }
    // 改变show1 的this 指向
    this.show1 = this.show1.bind(this)
  }
  render() {
    return (
      <div>
        <button onClick={this.show}>不传参写法</button>
        <button onClick = {() =>) {
      this.show ('1')}> One </ button> 
        <button onClick = {() => this .show ('2')}> Two </ button> 
        { / * this time of show1 points to button So change it to point to * / }
         <button data-index = "1" onClick = { this .show1}> One </ button> 
        <button data-index = "2" onClick = { this .show1}> Two </ button> 
        <div className = { this .state.c1}> Content one </ div> 
        <div className = { this .state.c2}> Content two </ div> 
      </ div>     ) 
  } 
  show (arg) { 
    console .log(arg)if(arg === '1'this.setState({
        c1:

    'active',
        c2:'content'
      })
    }else {
      this.setState({
        c2:'active',
        c1:'content'
      })
    }
    
  }
  show1(e) {
    console.log(e.target.dataset.index)
    let arg = e.target.dataset.index
    if(arg === '1') {
      this.setState({
        c1:'active',
        c2:'content'
      })
    }else {
      this.setState({
        c2:'active',
        c1:'content'
      })
    }
  }
}

ReactDOM.render(
  <div>
    <Hello />
  </div>,
  document.getElementById('root')
)