这里只贴出部分App.js的代码,为了讲解在React组件中的一个点击按钮,调用函数传参方法。
class App extends Component {
state = {
persons:
[
{ name: "Mrs CoCo", count: 21 },
{ name: "Mrs Maomao", count: 31 }
],
otherState: "anything"
}
switchState = (elem) => {
// this.state.persons[0].name="Mrs";
this.setState(
{
persons:
[
{ name: (elem), count: 23 },
{ name: "Mrs Maomao", count: 31 }
]
}
);
}
render() {
return (
<div className="App">
<button onClick={this.switchState.bind(this, "Mrs Kora")}>改变状态值</button>
{/* <h1><Person name="Mrs CoCo" count="30"/></h1> */}
<Person name={this.state.persons[0].name} count={this.state.persons[0].count}>我很高兴!!!</Person>
</div>
);
}
}
export default App;
点击button的时候,会调用函数,(属性传参)调用函数传参有两种方法:
1.箭头函数
<button onClick={()=> this.switchState("Mrs Kora")}>改变状态值</button>
注意,<button onClick={this.switchState("Mrs Kora")}>这样写,就会在画面运行的时候直接调用该方法,不会在点击按钮之后触发方法。
2.bind()方法 建议使用
<button onClick={this.switchState.bind(this, "Mrs Kora")}>改变状态值</button>
另外一个知识点就是事件传值,就是传递事件。自己创建一个组件Person.js内容如下:
import React from 'react';
// const是定义常量
const Person = (elem) => { // 形参接收,是一个对象
// return <p>大家好,我是{elem.name},我的作品有{elem.count}部</p>;
return (
<div>
<p onClick={elem.myClick}>大家好,我是{elem.name},我已经有{elem.count}部作品!</p>
<p>{elem.children}</p>
<p>{elem.haha}</p>
</div>
);
}
export default Person;
在Person.js文件中,点击P标签的内容,可以触发函数事件, 值得注意的是,P标签的onClick事件的值,应该是传递过来的elem对象的属性,而不能写this或者不是传递过来的参数对象。那么,在App.js中,将定义一个myClick的变量事件。
<Person myClick={this.switchState.bind(this,"shuaishuai")} name={this.state.persons[0].name} count={this.state.persons[0].count} >我很高兴!!!</Person>
注意:在App.js和Person.js文件中,要保证绑定的事件名称要保持一致。