文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React事件监听和State状态修改方式

2022-11-13 14:15

关注

React事件监听和State状态修改

on*函数可直接使用,但只能使用在html标签上,自己创建的组件标签不可

组件可以增加state状态,修改用setState方法,修改会有缓存,只能保证在渲染到页面之前会改好。所以setState后立马去使用值可能是不对的

狗子组件1:点击会打印bark和run

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  render () {
    return (<div onClick={
    //有两个方法需要实现,所以用一个函数进行封装
      ()=>{
        this.bark();
        this.run();
      }
    }>DOG</div>)
    }
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));

狗子组件2:增加bark和run状态,开始为false,点击变成true,1s后还原成false 

class Dog extends Component {
  constructor () {
    super()
    this.state={
      bark:false,
      run:false
    }
  }
  
  clickYeah () {
    this.setState({
      bark: true,
      run: true
    })
    //因为setState会有缓存,值后面才会变,所以这里打印出来还是false
    console.log('bark'+this.state.bark);
    console.log('run'+this.state.run);
    setTimeout(()=>{
      //1s之后将值改回成false,所以这里打印出来还是false。如果想要检验前面修改成true有没有生效,可以将这里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事件监听相关例子

 var TestClickComponent = React.creatsClass({
    handleClick: function(event){
 
    //操作DOM节点
 
        var msg = React.findDOMNode(this.refs.tip);
         if(msg.style.display === 'none'){
            msg.style.display = 'inline';
        }else{
            msg.style.display = 'none';
        }
        //阻止事件的冒泡和默认行为
 
        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>
        ); 
    } 
});

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯