React组件之函数传参

这里只贴出部分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>

</div>

);

}

export default Person;

在Person.js文件中，点击P标签的内容，可以触发函数事件，值得注意的是，P标签的onClick事件的值，应该是传递过来的elem对象的属性，而不能写this或者不是传递过来的参数对象。那么，在App.js中，将定义一个myClick的变量事件。

注意：在App.js和Person.js文件中，要保证绑定的事件名称要保持一致。

React组件之函数传参

猜你喜欢