React事件監(jiān)聽(tīng)和State狀態(tài)修改方式

更新時(shí)間：2022年08月04日 11:22:34 作者：大名張無(wú)忌

這篇文章主要介紹了React事件監(jiān)聽(tīng)和State狀態(tài)修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React事件監(jiān)聽(tīng)和State狀態(tài)修改

on*函數(shù)可直接使用，但只能使用在html標(biāo)簽上，自己創(chuàng)建的組件標(biāo)簽不可

組件可以增加state狀態(tài)，修改用setState方法，修改會(huì)有緩存，只能保證在渲染到頁(yè)面之前會(huì)改好。所以setState后立馬去使用值可能是不對(duì)的

狗子組件1：點(diǎn)擊會(huì)打印bark和run

class Dog extends Component {
? bark () {
? ? console.log('bark')
? }
??
? run () {
? ? console.log('run')
? }
??
? render () {
? ? return (<div onClick={
? ? //有兩個(gè)方法需要實(shí)現(xiàn)，所以用一個(gè)函數(shù)進(jìn)行封裝
? ? ? ()=>{
? ? ? ? this.bark();
? ? ? ? this.run();
? ? ? }
? ? }>DOG</div>)
? ? }
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));

狗子組件2：增加bark和run狀態(tài)，開(kāi)始為false，點(diǎn)擊變成true，1s后還原成false

class Dog extends Component {
  constructor () {
    super()
    this.state={
      bark:false,
      run:false
    }
  }
  
  clickYeah () {
    this.setState({
      bark: true,
      run: true
    })
    //因?yàn)閟etState會(huì)有緩存，值后面才會(huì)變，所以這里打印出來(lái)還是false
    console.log('bark'+this.state.bark);
    console.log('run'+this.state.run);
    setTimeout(()=>{
      //1s之后將值改回成false，所以這里打印出來(lái)還是false。如果想要檢驗(yàn)前面修改成true有沒(méi)有生效，可以將這里setState修改成false的步驟先注釋掉
      this.setState({
        bark: false,
        run: false
      })
      console.log('bark'+this.state.bark+'run'+this.state.run);
    },1000)
  }
  
  render () {
    return (<div onClick={this.clickYeah.bind(this)}>DOG</div>)
  }
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));

React事件監(jiān)聽(tīng)相關(guān)例子

 var TestClickComponent = React.creatsClass({
    handleClick: function(event){
 
    //操作DOM節(jié)點(diǎn)
 
        var msg = React.findDOMNode(this.refs.tip);
         if(msg.style.display === 'none'){
            msg.style.display = 'inline';
        }else{
            msg.style.display = 'none';
        }

        //阻止事件的冒泡和默認(rèn)行為
 
        event.stopPropagation();
        event.preventDefault();
    },
 
    render: function(){
 
        return(
            <div>
                <button onClick={this.handleClick}>顯示/隱藏</button>
                <span ref="tip">message</span>
            </div>
        );
    }
});

var TestInputComponent = React.createClass({
    getInitialState: function(){
        return{
            inputContent: ' '
        }
    },
 
    changeHandler:function(event){
 
      //改變state的值
 
        this.setState({
            inputContent:event,target.value
        });
 
        event.preventDefault();
        event.stopPropagation();
    },
 
    render: function(){
 
        return(
            <div>
                <input type="text" onChange={this.changeHandler}/>
                <span>{this.state.inputContent}</span>
            </div>
        ); 
    } 
});

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: