![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
kilig坚果
这个作者很懒,什么都没留下…
展开
-
React:状态提升案例-烧开水
1.定义Boilingverdict组件function Boilingverdict(props){ if(props.celsius>=100){ return <h1>水烧开了</h1> }else{ return <h1>水凉凉</h1> }}export default Boilingverdict2.定义第一个输入框import React from "react"impo原创 2021-01-13 17:38:53 · 174 阅读 · 0 评论 -
React:非受控组件&ref
非受控组件:在受控组件中,表单数据由react处理,让表单数据由dom处理,就是非受控组件使用ref从DOM中或许表单数据//点击按钮 Input输入框获得焦点import React from "react"class H extends React.Component{ constructor(){ super() this.myRef = React.createRef()//创建一个ref } handleClick(){原创 2021-01-07 21:54:02 · 133 阅读 · 0 评论 -
React:select受控
import React from "react"class Selector extends React.Component{ constructor(){ super() this.state = { val:"1" } } handleChange(e){ this.setState({ val:e.target.value }) }原创 2021-01-07 17:46:20 · 266 阅读 · 0 评论 -
React:受控组件
表单元素的占位符可以使用defaultValuevalue会被react控制=>受控组件受控组件:值被react控制的表单输入元素import React from "react"class G extends React.Component{ render(){ return ( <input type="text" defaultValue="请输入..."/> ) }}export default G原创 2021-01-06 22:01:24 · 156 阅读 · 0 评论 -
React:列表&keys
import React from "react"class F extends React.Component{ constructor(){ super() this.state = { tnt : ["马嘉祺","丁程鑫","宋亚轩","刘耀文","张真源","严浩翔","贺峻霖"] } } render(){ let {tnt} = this.state let lis原创 2021-01-06 20:39:49 · 81 阅读 · 0 评论 -
React:运算符
!!""//falseif(str==""){}if(!!str)//react不会将bool值渲染在页面上//index.jsReactDOM.render( <React.StrictMode> <E messages={["马嘉祺","丁程鑫","宋亚轩","刘耀文","张真源","严浩翔","贺峻霖"]} /> </React.StrictMode>, document.getElementById('root'));//原创 2021-01-06 19:48:13 · 530 阅读 · 0 评论 -
React:toggle案例
import React from "react"const html1 = <h1>尊敬的VIP会员,您好</h1>const html2 = <h1>你我本无缘,全靠你花钱</h1>class D extends React.Component{ constructor(){ super() this.state = { isCharge:true } }原创 2021-01-06 17:54:51 · 378 阅读 · 0 评论 -
React:阻止组件渲染
使用return nullReactDOM.render( <React.StrictMode> <C flag={false}/> </React.StrictMode>, document.getElementById('root'));import React from "react"class C extends React.Component{ render(){ if(this.props.flag){原创 2021-01-05 19:34:15 · 584 阅读 · 1 评论 -
React:注册事件
this丢失一般会指向window,在class中如果this丢失会指向undefined使用class时,里面会默认使用严格模式import React from "react"class B extends React.Component{ constructor(){ super() //第三种方法需要用这种方式绑定this this.handleClick2 = this.handleClick2.bind(this) t原创 2021-01-04 21:52:35 · 226 阅读 · 0 评论 -
React:阻止默认事件
在html页面中直接通过return false即可阻止默认事件<a href="#" onclick="alert('阻止跳转');return false">点击</a>而在react中需要使用e.preventDefault()function PreventDe(){ return ( <a href="#" onClick={(e)=>{ console.log("阻止跳转"); e原创 2021-01-04 21:20:57 · 1685 阅读 · 0 评论 -
React:为什么要传props
render函数在组件挂载前就会触发import { Component } from "react";import React from "react"class T2 extends React.Component{ constructor(props){ //但是在构造器中无法直接使用,否则是undefined //必须接收props console.log(props.name);//宋亚轩 super() }原创 2021-01-04 17:33:39 · 88 阅读 · 0 评论 -
React:更新状态三件重要的事
import React,{Component} from "react"class T extends Component{ constructor(props){ super(props) this.state={ name:"宋亚轩", person:{ hobby:"唱歌", sing:"夜空中最亮的星" }原创 2021-01-04 16:28:14 · 80 阅读 · 0 评论