这是我参与8月更文挑战的第四天 活动详情查看:8月更文挑战
类组件的绑定事件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
handelClick(){
console.log("单击事件出发了")
}
render(){
return(
<button onClick={()=>{this.handelClick()}}>点击</button>
)}
}
ReactDOM.render(<App/>,document.getElementById('root'))
函数组件的绑定事件
function App(){
function handleClick(){
console.log('单击事件触发了')
}
return (
<button onClick={handleClick}></button>
)
}
function App(){
function handleClick(e){
e.preventDefault()
console.log('a标签触发了')
}
return (
<a href="http://www.baidu.com" onClick={handleClick}>百度</a>
)
}
状态初始化 方法一:需要constructor初始化 ,super()也必须写
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component {
// 初始化状态
constructor(){
// 必须有 es6 class的一个要求
super()
this.state ={
count : 0
}
}
render(){
return(
<div>
{this.state.count}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
方法二:简化写法 推荐使用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component {
// 简化语法 初始化state
state ={
count : 10
}
render(){
return(
<div>
{this.state.count}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
// 正确
this.setState({
count:this.state.count+1
})
// 错误
this.state.count += 1
计数器
state ={
count : 10,
test : 2 // 当对象有多个变量时 setState中只需写修改的那个变量
}
render(){
return(
<div>
{this.state.count}
<button onClick={()=>{
this.setState({
count:this.state.count + 1
})
}}>+1</button>
{this.state.test}
</div>
)
}
class App extends React.Component {
state ={
count : 10,
test : 2
}
// 事件处理程序
onIncrement(){
// 找不到 this
console.log(this,"this")
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
{this.state.count}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
class App extends React.Component {
constructor(){
super()
// 绑定 bind
this.onIncrement = this.onIncrement.bind(this)
}
state ={
count : 10,
test : 2
}
// 事件处理程序
onIncrement(){
// 找不到 this
console.log(this,"this")
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
{this.state.count}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
既将onIncrement 函数 改成箭头函数
// 事件处理程序
onIncrement = ()=>{
this.setState({
count:this.state.count + 1
})
}
<input type="text" value={this.state.txt}/>
步骤: 1.在state中添加一个状态,作为表单元素的value的值(控制表单元素值的由来) 2.给表单元素绑定change事件,将表单元素的值 设置为state的值(控制表单元素值的变化)
<input type="text" value={this.state.txt}
onChange={e=>this.setState({txt:e.target.value})}/>
文本框 改变值
class App extends React.Component {
state ={
count : 10,
test : 2
}
handleChange = e=>{
this.setState({
count:e.target.value
})
}
render(){
return(
<div>
<input value={this.state.count} onChange={this.handleChange}></input>
</div>
)
}
}
使用React插件,我们能看出来 state里的count值发生了变化。
示例: 复选框(操作checked)
<input type="checkbox" checked={this.state.check} onChange={this.handleChecked}>
class App extends React.Component {
state ={
txt : 10,
check : 2
}
handleChange = e=>{
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type === 'checkbox'
?target.checked
: target.value
// 获取name
const name = target.name
this.setState({
[name]:value
})
}
render(){
return(
<div>
<input name="txt" value={this.state.txt} onChange={this.handleChange}></input>
<input name="check" type="checkbox" checked={this.state.check} onChange={this.handleChange}></input>
</div>
)
}
}
使用步骤: 1.调用React.createRef()方法创建一个ref对象
constructor(){
super()
this.txtRef = React.createRef()
}
2.将创建好的ref对象添加到文本框中
<input type="text" ref={this.txtRef}/>
3.通过ref对象获取文本框的值
console.log(this.txtRef.current.value)
class App extends React.Component {
constructor(){
super()
// 创建ref
this.txtRef = React.createRef()
}
getTxt = ()=>{
console.log(this.txtRef.current.value)
}
render(){
return(
<div>
<input name="txt" ref={this.txtRef}></input>
<button onClick={this.getTxt}>getTxt</button>
</div>
)
}
}
知道即可,因为其操作了DOM。违背了React的思想。