react基础2
react中通过状态获取input框的value值
之前我们说通过ref可以获取现在
我们利用onChage事件获取input框的value，虽然oninput也可以实现
但是官方推荐我们使用onChage，oninput纯属意外
import React,{
Component} from 'react'
export default class App extends Component{
state = {
mytext:"",
datalist:[]
}
render(){
return(
<div>
{
/* <input type="text" ref="mytext"/> */}
{
/*
onChage获取 获取每次value的改变
*/
}
<input type="text" onChange={
(ev)=>{
console.log(ev.target.value);
this.setState({
mytext:ev.target.value,
})
}}/>
</div>
)
}
}
利用react做个简单的todolist
import React,{
Component} from 'react'
export default class App extends Component{
state = {
mytext:"",
datalist:[]
}
render(){
return(
<div>
{
/* <input type="text" ref="mytext"/> */}
{
/*
onChage获取 获取每次value的改变
*/
}
<input type="text" value={
this.state.mytext} onChange={
(ev)=>{
// console.log(ev.target.value);
this.setState({
mytext:ev.target.value,
})
}}/>
<button onClick={
this.handclick}>Add</button>
<ul>
{
this.state.datalist.map((item,index)=>
<li key={
index}>
{
item}
<button onClick={
()=>{
this.handdel(index)}}>del</button>
</li>
)
}
</ul>
</div>
)
}
handclick=()=>{
// this.state.datalist.push(this.state.mytext)
// console.log(this.state.datalist);
this.setState({
datalist:[...this.state.datalist,this.state.mytext],
mytext:""
})
}
handdel=(index)=>{
// console.log(index);
// let newarr = this.state.datalist //浅赋值改变了原来的状态
// newarr.splice(index,1);
// let newarr = this.state.datalist.slice();
// slice concat ... 都适合
let newarr = [...this.state.datalist]
newarr.splice(index,1);
this.setState({
datalist:newarr
})
}
}
- 这里需要注意的删除的时候深拷贝和浅拷贝
setState的几种写法
- 第一种如果我点击一个按钮让setState调用两次怎么整？
这种方案肯定不行因为setState在一个事件中连续会进行合并
import React,{
Component} from 'react'
export default class App extends Component{
state={
myname:"kerwein",
count:1
}
render(){
return(
<div>
{
this.state.myname}
{
this.state.count}
<button onClick={
this.handleClick1}>add1</button>
</div>
)
}
handleClick1 = ()=>{
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
})
// 同一事件loop 连续setState 会进行合并
}
}
第二种写法
this.setState((prevState)=>{
return {
count:prevState.count+1
}
})
this.setState((prevState)=>{
return {
count:prevState.count+1
}
})
简写
this.setState((prevState)=>({
count:prevState.count+1
}))
this.setState((prevState)=>({
count:prevState.count+1
}))
这种写法会放在一个队列里底下的会等上面执行完在执行
第三种写法
this.setState({
myname:"xiaoming"
},()=>{
console.log(this.state.myname)
})
这种写法 主要作用是可以访问到更改之后干的事情很像vue中的$nextTick
也就是说以下这段代码是异步的，你打印出来的myname肯定是原来的状态
this.setState({
myname:"xiaoming"
})
console.log(this.state.myname)
react中的显示和隐藏和创建和删除
显示隐藏通过状态三目运算让其显示和隐藏
import React,{
Component} from 'react'
import './css/index.css'
export default class App extends Component{
state = {
isShow:true,
}
render(){
return (
<div>
<button onClick={
()=>{
this.setState({
isShow:!this.state.isShow
})
}}>show/hide</button>
<div className={
this.state.isShow?'show':''}>11111111111111</div>
</div>
)
}
}
创建和删除
通过三目运算和状态让dom元素创建和删除
import React,{
Component} from 'react'
import './css/index.css'
export default class App extends Component{
state = {
isShow:true,
ishide:true
}
render(){
var a = <div>1111111111111</div>
var b = <div>2222222222222</div>
return (
<div>
<button onClick={
()=>{
this.setState({
isShow:!this.state.isShow
})
}}>show/hide</button>
<div className={
this.state.isShow?'show':''}>11111111111111</div>
<button onClick={
()=>{
this.setState({
ishide:!this.state.ishide
})
}}>create/delete</button>
{
this.state.ishide?a:b
}
</div>
)
}
}
react中 props 父子组件传参
import React,{
Component} from 'react'
class Navbar extends Component{
render(){
return (
<div>
<button>back</button>
Navbar----{
this.props.mytitle}
<button>home</button>
</div>
)
}
}
export default class App extends Component{
render(){
return(
<div>
<Navbar mytitle="home"/>
<Navbar mytitle="list"/>
<Navbar mytitle="shopcar"/>
</div>
)
}
}
直接通过
{
this.props.mytitle}
props验证
Navbar.propTypes= {
myshow:MyPropTypes.bool
}//属性验证
这样写不加static的话直接在外面定义了一个类属性
加上static在Navbar里面定义一个类属性
import React,{
Component} from 'react'
import MyPropTypes from 'prop-types'
class Navbar extends Component{
static propTypes = {
myshow:MyPropTypes.bool
}
render(){
return (
<div>
<button>back</button>
Navbar----{
this.props.mytitle}
{
this.props.myshow?<button>home</button>:null
}
</div>
)
}
}
// Navbar.propTypes= {
// myshow:MyPropTypes.bool
// }//属性验证
export default class App extends Component{
render(){
return(
<div>
<Navbar mytitle="home" myshow={
false}/>
<Navbar mytitle="list" myshow={
true}/>
<Navbar mytitle="shopcar" myshow={
true}/>
</div>
)
}
}
//ES6
class Test{
a="对象属性" //constructor
}
Test.a="类属性"
console.log(Test.a) //类属性
console.log(new Test().a) //对象属性
//ES7
class Test{
static a="类属性" //等价于上面的写法， 类属性
a="对象属性" //constructor
}
console.log(Test.a) //类属性
console.log(new Test().a) //对象属性
默认属性
static defaultProps = {
myshow:true
}//默认属性
react中的子传父
react中子传父通过回调函数
import React,{
Component} from 'react'
class Navbar extends Component{
render() {
return (
<div style={
{
background:"red"}}>
Navbar
<button onClick={
this.handclik}>click</button>
</div>
)
}
handclik = ()=>{
this.props.onEvent()
}
}
class Sidebar extends Component{
render() {
return (
<div style={
{
background:"yellow"}}>
Siderbar
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
)
}
}
export default class App extends Component{
state = {
isShow:false
}
render(){
return(
<div>
<Navbar onEvent={
()=>{
this.setState({
isShow:!this.state.isShow
})
}}/>
{
this.state.isShow?<Sidebar/>:null
}
</div>
)
}
}
// vue 父子通信 父传子-->属性 子传父---> 事件
// vue ref通信
// React 父子通信 父传子-->属性 子传父---> 回调函数
react中ref通信
可以直接通过refs获取到这个组件
this.refs.myinput.state.mytext
如果要修改的话在组件中创建一个函数通过refs调用
this.refs.myinput.kerwinrest()
具体案例
import React,{
Component} from 'react'
class Input extends Component{
state = {
mytext:""
}
kerwinrest= ()=>{
this.setState({
mytext:""
})
}
render(){
return(
<div>
<input type="text" value={
this.state.mytext} style={
{
background:"yellow"}} onChange={
(evt)=>{
this.setState({
mytext:evt.target.value
},()=>{
// console.log(this.state.mytext);
})
}} />
</div>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<Input ref="myinput"/>
<button onClick={
this.handclick}>Add</button>
</div>
)
}
handclick = ()=>{
//拿到值
console.log(this.refs.myinput.state.mytext)
//清空
this.refs.myinput.kerwinrest()
}
}