以下代码全部在react脚手架环境中执行
合成事件的说明
import React from 'react'
import ReactDOM from 'react-dom'
//react事件对象,实际上被react处理过了,
class App extends React.Component{
state = {
msg:"我是msg"
}
handleClick = (e) => {
console.log(e)
console.log(this.state.msg)
}
onClick = (e) => {
e.preventDefault()
console.log(2222)
}
render() {
return (
<div>
<h1>我是App组件</h1>
<button onClick={this.handleClick}>按钮</button>
<a href="http://www.baidu.com" onClick = {this.goLink}>去百度</a>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码setState的使用
import React from 'react'
import ReactDOM from 'react-dom'
//setState作用
//1.修改了state的值
class App extends React.Component{
state = {
msg:"我是msg",
money:100,
count:10
}
handleClick = (e) => {
// this.state.msg = "嘿嘿"
this.setState({
msg:"嘎嘎",
money:1000
})
}
onClick = (e) => {
e.preventDefault()
//阻止冒泡
console.log(2222)
}
add = () => {
this.setState({
count:this.state.count + 1
})
}
render() {
return (
<div>
<h1>我是App组件 - {this.state.msg} - {this.state.count}</h1>
<button onClick={this.handleClick}>按钮</button>
<button onClick={this.add}>改值</button>
<a href="http://www.baidu.com" onClick = {this.goLink}>去百度</a>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码受控组件的说明
//需求：有一个表单元素,希望表单元素的值,可以和state中的数据绑定起来
// 完成的就是之前v-model的效果(语法糖)
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
state = {
msg:'嘎嘎'
}
handleChange =(e) => {
// console.log(e.target.value)
const value = e.target.value
this.setState({
msg:value
})
}
render() {
return (
<div>
<h1>受控组件</h1>
{/* readOnly只读 */}
<input type="text"
value={this.state.msg}
onChange={this.handleChange}/>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码多个受控组件的说明
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
state = {
username:"张老三",
desc:"黑色的",
fruits:3,
isSingle:false
}
handleUser = (e) =>{
this.setState({
username:e.target.value
})
};
handeleDesc = (e) => {
this.setState({
desc:e.target.value
})
};
handleFruits = (e) => {
this.setState({
fruits:e.target.value
})
}
handleSingle = (e) => {
// console.log(e.target.value)
this.setState({
isSingle:e.target.checked
})
}
render() {
return (
<div>
<h1>受控组件</h1>
{/* 输入框 */}
<div>
<input type="text" value={this.state.username}
onChange={this.handleUser}/>
</div>
{/* 文本域 */}
<div>
<textarea value={this.state.desc}
onChange={this.handeleDesc} name="" id="" cols="30" rows="10"></textarea>
</div>
{/* 下拉菜单 */}
<div>
<select name="" id="" value = {this.state.fruits}
onChange={this.handleFruits}>
<option value="1">苹果</option>
<option value="2">西瓜</option>
<option value="3">榴莲</option>
<option value="4">芒果</option>
</select>
</div>
{/* 复选框 */}
<div>
是否单身
<input type="checkbox" checked={this.state.isSingle} onChange={this.handleSingle}/>
</div>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码多个受控组件处理的优化
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
state = {
username:"张老三",
desc:"黑色的",
fruits:3,
isSingle:false
}
handleChange = (e) => {
// console.log("触发了")
const key = e.target.name
const value = e.target.value
const type = e.target.type
if(type === "checkbox" ) {
this.setState({
[key]:e.target.checked,
})
} else {
this.setState({
[key]:value
})
}
}
render() {
return (
<div>
<h1>受控组件</h1>
{/* 输入框 */}
<div>
<input name="username" type="text" value={this.state.username}
onChange={this.handleChange}/>
</div>
{/* 文本域 */}
<div>
<textarea name="desc" value={this.state.desc}
onChange={this.handleChange} id="" cols="30" rows="10"></textarea>
</div>
{/* 下拉菜单 */}
<div>
<select name="fruits" id="" value = {this.state.fruits}
onChange={this.handleChange}>
<option value="1">苹果</option>
<option value="2">西瓜</option>
<option value="3">榴莲</option>
<option value="4">芒果</option>
</select>
</div>
{/* 复选框 */}
<div>
是否单身
<input name="isSingle" type="checkbox" checked={this.state.isSingle} onChange={this.handleChange}/>
</div>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码属性名表达式
/**const temp = "嘎嘎"
const obj = {
[temp]:18 *10
}
console.log(obj)*/
const key = "desc"
const obj = {
username:"嘿嘿",
age:18,
[key]:"哈哈"
}
console.log(obj.desc)
复制代码受控组件的巩固
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
state = {
username:"张老三",
desc:"黑色的",
fruits:3,
isSingle:false
}
handleChange = (e) => {
const {name,type,value,checked} = e.target
this.setState({
[name]: type === "checkbox"? checked:value
})
}
render() {
return (
<div>
<h1>受控组件</h1>
{/* 输入框 */}
<div>
<input name="username" type="text" value={this.state.username}
onChange={this.handleChange}/>
</div>
{/* 文本域 */}
<div>
<textarea name="desc" value={this.state.desc}
onChange={this.handleChange} id="" cols="30" rows="10"></textarea>
</div>
{/* 下拉菜单 */}
<div>
<select name="fruits" id="" value = {this.state.fruits}
onChange={this.handleChange}>
<option value="1">苹果</option>
<option value="2">西瓜</option>
<option value="3">榴莲</option>
<option value="4">芒果</option>
</select>
</div>
{/* 复选框 */}
<div>
是否单身
<input name="isSingle" type="checkbox" checked={this.state.isSingle} onChange={this.handleChange}/>
</div>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码非受控组件的演示
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
constructor() {
super()
this.inRef = React.createRef()
this.h1Ref = React.createRef()
}
handleClick = () => {
console.log(this.inRef.current.value)
console.log(this.h1Ref.current)
//获取焦点
this.inRef.current.focus()
}
render() {
return (
<div>
<h1 ref={this.h1Ref}>演示非受控组件</h1>
<input type="text" ref={this.inRef} />
<button onClick={this.handleClick}>点击</button>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码ref用来获取react组件
import React from 'react'
import ReactDOM from 'react-dom'
class MyTable extends React.Component{
render() {
return <div>我是一个表格</div>
}
validate() {
console.log("对内容进行校验")
}
sayHi() {
console.log("你好哇")
}
}
class App extends React.Component{
constructor() {
super()
this.inRef = React.createRef()
this.h1Ref = React.createRef()
this.tableRef = React.createRef()
}
handleClick = () => {
console.log(this.inRef.current.value)
console.log(this.h1Ref.current)
//获取焦点
this.inRef.current.focus()
console.log(this.tableRef.current)
}
render() {
return (
<div>
<h1 ref={this.h1Ref}>演示非受控组件</h1>
<input type="text" ref={this.inRef} />
<button onClick={this.handleClick}>点击</button>
<MyTable ref={this.tableRef}></MyTable>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById('root'))
复制代码评论列表-综合案例
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class App extends React.Component {
state = {
list:[
{id:1,name:"渣渣灰",content:"系兄弟，就来砍我"},
{id:2,name:"古天乐",content:"快来玩，贪玩蓝月"},
{id:3,name:"刘德华",content:"冰雨"}
],
username:"",
content:""
}
clear = () => {
this.setState({
list:[]
})
}
add =() => {
const {username,content} = this.state
if(username === "" || content === "") return
const obj = {
id: +new Date(),
name:username,
content,
}
this.setState({
list:[obj,...this.state.list],
username:"",
content:""
})
}
del (id) {
// console.log(id)
/**this.state.list.filter(item => item.id !== id)*/
this.setState({
list:this.state.list.filter(item => item.id !== id)
})
}
handleChange =(e) => {
const {name,value} = e.target
this.setState({
[name]:value
})
}
renderList() {
if(this.state.list.length >0) {
return <ul>
{this.state.list.map(item => {
return <li key ={item.id}>
<h3>评论人：{item.name}</h3>
<p>评论内容：{item.content}</p>
<button onClick={this.del.bind(this,item.id)}>删除</button>
</li>
})}
</ul>
} else {
return <div className="no-comment">暂无评论</div>
}
}
render() {
return (
<div className="app">
<div>
<input value={this.state.username}
name ="username"
onChange={this.handleChange} className="user" type="text" placeholder="请输入评论人" />
<br />
<textarea
value={this.state.content}
onChange={this.handleChange}
name="content"
className="content"
cols="30"
rows="10"
placeholder="请输入评论内容"
/>
<br />
<button onClick={this.add}>发表评论</button>
<button onClick = {this.clear}>清空评论</button>
</div>
{/* <div className="no-comment">暂无评论</div> */}
{this.renderList()}
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
复制代码props传值-类组件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
render(){
console.log(this.props)
return (
<div>
<h1>类组件</h1>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
)
}
}
const arr = ['张飞','吕布']
ReactDOM.render(<App name="张三" age={18} list={arr} ></App>,document.getElementById('root'))
复制代码props传值-函数组件
import React from 'react'
import ReactDOM from 'react-dom'
function Demo({name,age,desc}) {
return (
<div>
<h1>我是函数组件</h1>
<p>{name}</p>
<p>{age}</p>
<p>{desc}</p>
</div>
)
}
ReactDOM.render(<Demo name="凡凡" age={18} desc="无敌"></Demo>,document.getElementById('root'))
复制代码props的特点
import React from 'react'
import ReactDOM from 'react-dom'
//props的特点:
//1.可以传递任意类型的 数组,对象,数字,字符串,jsx,函数...
//2.props是只读的，不可以修改的
//组件的数据来源
//1.state 是自己的,通过setState可以随便修改
//2.props 是外部的,外部的数据不要改
class App extends React.Component{
render() {
console.log(this.props)
return (
<div>
<h1>props的特点</h1>
{this.props.element}
<button onClick={this.changeProps}>改props的值</button>
</div>
)
}
changeProps = () => {
console.log(this.props.num)
console.log(this.props.arr)
}
}
const arr = ["张三","李四"]
const obj = {
name:"zs"
}
const num = 100
const str= "abc"
const element = <div>我是jsx结构,我是一个元素</div>
const fn =() => {
console.log('嘎嘎')
}
ReactDOM.render(<App arr={arr} obj ={obj} num={num} element={element} fn={fn} str={str}></App>,document.getElementById('root'))
复制代码以上代码全部来源视频资料里的敲的代码，仅供学习参考
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
