React事件绑定

语法：在对应标签上书写on+事件（比如onClick,onChange），注意和原生的事件区分，React的事件首字母要大写。

const handleChange=(e:any)=>{console.log(e);console.log('change事件触发');// e不是原生事件//e.nativeEvent是原生事件
}
const App = () => {let list=['1','2','3'];// for(let i=0;i<list.length;i++){//   list[i]=<li>{list[i]}</li>// }const myClass = ['box1', 'box2']const myClass2 = classNames({box1:true,box2:true,[style.box5]:true})return (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={handleChange} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}</div><div></div></>)
}export default App

这里的e就是一个类似原生的事件e，并不是真正的原生事件e,如果要使用原生事件e，需要使用 e.nativeEvent。

如果要传递自定义参数，需要进行以下修改：

const handleChange=(e:any,name:string)=>{console.log(e.target.value);console.log('传递过来的参数',name);// e不是原生事件//e.nativeEvent是原生事件
}
const App = () => {let list=['1','2','3'];// for(let i=0;i<list.length;i++){//   list[i]=<li>{list[i]}</li>// }const myClass = ['box1', 'box2']const myClass2 = classNames({box1:true,box2:true,[style.box5]:true})return (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={()=>handleChange(event,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}</div><div></div></>)
}export default App

 

<input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />

注意形参和实参的顺序。

 组件

概念：一个组件就是用户界面的一部分，他可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以复用多次。

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。

首先，新建一个组件button.tsx

然后引入使用：

import Button from './components/button'return (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}<Button></Button></div><div></div></>)
}

 

 useState的使用

useState是一个React Hook（函数），他允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着发生变化（数据驱动视图），可以类比与vue中的响应式。

const [count,setCount]=useState(0)//useState是一个函数，返回值是一个数组
//数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
//useState的参数将作为count的初始值

//useState实现一个计数器按钮const [count,setCount] = React.useState(0)const handleClick4=()=>{setCount(count+1)console.log('click',count);}return (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}<Button></Button><button onClick={handleClick4}>加一</button><div>{count}</div></div><div></div></>)
}

 状态不可变

在React中，状态被认为是制度的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

比如上面中修改count的值不能直接使用count++，而是使用setCount（count+1）来修改count的值。

对象修改状态

const [form ,setForm]=useState({name:'mez',age:18})const handleClick5=()=>{setForm({...form,name:'jack'})}return (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}<Button></Button><button onClick={handleClick4}>加一</button><button onClick={handleClick5}>修改对象</button><div>{count}--{form.name}</div></div><div></div></>)
}export default App

 

注意：不能使用form.name进行直接修改！

基础样式控制

React组件基础的样式控制有两种方式

1.行内样式（不推荐）

<div style={{color:'blue'}}>哈哈</div>

2.class类名控制样式

在css文件中定义样式，然后在引入使用

.box{
color:'blue'
}<div className="box">哈哈</div>