1. 事件处理
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
在react的事件处理程序中,内部的this是指向undefined
// 解决方案1: 通过this.clickFn.bind(this)
// 解决方案2: 属性初始化器语法, 提供了一个箭头函数
// 解决方案3: 在函数外面包一层箭头函数 onClick={this.clickFn}
// onClick={()=>{this.clickFn()}}
class Event extends React.Component {
constructor(props) {
super(props)
// 提供组件自己的状态
this.state = {
msg: 'hello react'
}
// 可以在构造函数中,去处理事件处理函数的this问题
// this.clickFn = this.clickFn.bind(this)
}
render() {
return (
<div>
<p>{this.state.msg}</p>
{/* 需求:点击button的时候,需要改变msg的数据 */}
<button
onClick={() => {
this.clickFn()
}}
>
点我修改msg
</button>
<a href="" onClick={this.clickFn} />
</div>
)
}
clickFn() {
// 修改msg的数据
// 注意点: 在react注册事件的时候,提供的事件处理函数的内部this指向undefined
// 没办法访问到this,没有办法访问到当前实例,没有办法访问到数据
// 如果想要修改react的状态,不能直接通过this.state.xxx去修改
this.setState({
msg: '呵呵'
})
}
}
ReactDOM.render(<Event />, document.getElementById('app'))
传参的问题:
// 传参第一种: 通过bind的方式进行传参,还想要获取事件对象, 事件对象是最后一个参数
// 参数第二种: 通过给事件处理程序包裹一个箭头函数
// 在注册事件的时候,能够传递参数
class Event extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<ul>
<li>
{/* 能够把id传递过来 */}
<button
onClick={() => {
this.clickFn(1)
}}
>
删除1
</button>
</li>
<li>
<button
onClick={() => {
this.clickFn(2)
}}
>
删除2
</button>
</li>
<li>
<button>删除3</button>
</li>
</ul>
</div>
)
}
// 传参第一种: 通过bind的方式进行传参,还想要获取事件对象, 事件对象是最后一个参数
// 参数第二种: 通过给事件处理程序包裹一个箭头函数
clickFn(id) {
console.log(id)
}
}
ReactDOM.render(<Event />, document.getElementById('app'))
2. 条件渲染
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
条件渲染——元素变量
class Score extends React.Component {
constructor(props) {
super(props)
this.state = {
score: 90
}
}
render() {
// 可以使用变量来保存react的对象
let cont