React事件 状态组件、非状态组件传值以及this指向
1.点击事件
<script type="text/babel">
function fn() {
alert(12);
}
// 事件的值要是一个函数
ReactDOM.render((
<div>
<input type="button" onClick={fn} value="你来点我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
2.点击事件传值
<script type="text/babel">
function fn(num) {
return function () {
alert(num);
}
}
ReactDOM.render((
<div>
{/*点击事件绑定的值是fn函数的运行结果，*/}
<input type="button" onClick={fn(23)} value="你来点我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
3.事件 4.事件
例1：
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button" onClick={function () {
alert(78)
}} value="你来点我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
例2：
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button" onClick={()=>{
alert(87)
}} value="你来点我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
5.事件bind
function fn(a,b,e) {
console.log(a,b,e.target.value,this)
//1 2 "你快来打我呀！" undefined
}
const obj = {
userName:"laoLi",
age:12
};
ReactDOM.render((
<div>
<input type="button" onClick={fn.bind(obj,1,2)} value="你快来打我呀！" />
</div>
),document.querySelector("#myApp"))
6.事件 显示与隐藏 7.显示隐藏优化
let isShow = true;
render();
function changeIsShow(){
isShow = !isShow
render();
}
function render() {
ReactDOM.render((
<div>
<input type="button" onClick={changeIsShow} value="显示与隐藏"/>
<div style={{
width:"100px",
height:"100px",
background:"red",
display:isShow?"block":"none"
}}></div>
</div>
),document.querySelector("#myApp"));
}
8.非状态组件
定义：通过函数来定义，该函数必须要有返回值。返回的内容即是组件的内容。
//函数名即是组件名
//函数必须要有返回值，如果不想返回数据 Return null
使用：将你的函数作为标签来使用
例1：
function Fn() {
return null;
// return (
// <div>lala</div>
// )
}
ReactDOM.render((
<div>
一起来学习组件吧
<Fn></Fn>
</div>
),document.querySelector("#myApp"));
例2：
语法：建议返回值用括号包裹
有且只能有一个根元素。
function MyCom() {
return (
<div>
大家好，我叫MYCOM
</div>
)
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
9.无状态组件传值
// 组件的属性，即是放在定义组件函数接收的参数对象当中
// 子组件接收的属性是不允许直接被修改的。
function MyCom(props) {
console.log(props);
function changeAge(){
props.age = 1234;
}
return (
<div>
大家好，我叫MYCOM
<input type="button" value="修改属性" onClick={changeAge}/>
</div>
)
}
let num = 9;
ReactDOM.render((
<div>
<MyCom userName = "xixi" age="12" num={num}></MyCom>
</div>
),document.querySelector("#myApp"));
10.非状态组件 修改父元素属性
// 接收属性
function MyCom(props) {
return (
<div>
<input type="button" value="修改userName" onClick={()=>{changeUserName("three");}} />
我是无状态组件{props.userName}
</div>
)
}
// 使用组件MyCom,并传递了一个属性名字叫userName 值为one
let userName = "one";
function changeUserName(str) {
userName = str;
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
}
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
11.组件嵌套
function Two() {
return (
<div>two</div>
)
}
function One() {
return (
<div>
one
<Two></Two>
</div>
)
}
ReactDOM.render((
<div>
<One></One>
</div>
),document.querySelector("#myApp"));
12.状态组件
// 状态组件：通过class来定义的组件。React.Component.
// class的名字即是组件名
class My extends React.Component{
// 呈现，它必须要有一个返回值，返回的内容好是组件的内容
render(){
return (
<div>
我是一个状态组件
</div>
)
}
}
ReactDOM.render((
<div>
<My></My>
</div>
),document.querySelector("#myApp"));
13.状态组件的传值1
组件传值：
传递的属性，其实是放到你的父级React.Component的props对象下
传递属性： <My userName="nihao" age="12"></My>
接收 ：this.props.userName this.props.age
class My extends React.Component{
constructor(props){
super(props);
console.log(this.props);
}
render(){
console.log("render",this.props);
return (
<div>
lala{this.props.userName}
</div>
)
}
}
ReactDOM.render((
<div>
<My userName="nihao" age="12"></My>
</div>
),document.querySelector("#myApp"))
14.状态组件的传值2
class Tag extends React.Component{
render(){
return (
<div>
<input type="button" onClick={this.props.changeNum} value={this.props.num}/>
</div>
)
}
}
class MyCom extends React.Component{
constructor(){
super();
this.num = 1;
console.log("constructor")
}
changeNum(){
console.log(11111,this);
this.num += 1;
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
}
render(){
console.log("render")
return (
<div>
Mycom
<Tag num={this.num} changeNum = {this.changeNum.bind(this)}></Tag>
</div>
)
}
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
15.状态组件的传值3
class Wrap extends React.Component{
constructor(){
super();
this.isShow = true;
console.log("costructor");
}
changeIsShow(){
this.isShow = !this.isShow;
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="显示隐藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
16.状态组件的状态 （state setState）
示例1：
class Wrap extends React.Component{
constructor(){
super();
this.state = {
isShow:true
}
}
changeIsShow(){
// this.state.isShow = !this.state.isShow;
// 更新你的数据，将你的ReactDOM.render重新执行。
this.setState({
isShow:!this.state.isShow
})
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="显示隐藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.state.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
示例2：
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum(){
// this.state.num = this.state.num+1;
// ReactDOM.render((
// <div>
// <Wrap></Wrap>
// </div>
// ),document.querySelector("#myApp"));
// 异步执行
this.setState({
num:this.state.num+1
},()=>{// 当你的数据更新完毕以后会执行该函数
console.log(this.state.num)
})
// console.log(this.state.num)
}
render(){
return (
<div>
<input type="button" onClick={this.changeNum.bind(this)} value={this.state.num} />
</div>
)
}
}
ReactDOM.render((
<div>
<Wrap></Wrap>
</div>
),document.querySelector("#myApp"));
关于事件this绑定问题（undefined）:
1.直接使用bind， 当前函数的使用频率不高；
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum(){
this.setState({
num:this.state.num+1
},()=>{// 当你的数据更新完毕以后会执行该函数
console.log(this.state.num)
})
}
render(){
return (
<div>
<input type="button" onClick{this.changeNum.bind(this)}
value={this.state.num}/>
</div>
)
}
}
2.直接写函数， 该函数没有重用，并且逻辑代码较少
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.setState({
num:this.state.num+1
})
}} value={this.state.num}/>
</div>
)
}
}
3.在构造器当中使用bind， 当前组件函数较少，但使用的频率比较高
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
this.abc = this.changeNum.bind(this);
}
changeNum(){
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={this.abc} value{this.state.num}/>
</div>
)
}
}
4.直接将函数定义为箭头函数， 可以重用，不可bind，但是传值麻烦
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum=()=>{
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.changeNum(123);
}} value={this.state.num}/>
</div>
)
}
}