React js-如何从子组件到父组件获取Click事件值?

你的电脑应该有功能 li 将值传递给click处理程序,而不是将无效的属性/属性放在 锂

查看中的更改 Games#render 和 onGameItemClick :

const { Component } = React;

class User extends Component {

    constructor() {
        super();
        this.onGameItemClick = this.onGameItemClick.bind(this);
    }
    
    onGameItemClick(e, val1, val2) {
        console.log("val1 =", val1, "val2 =", val2);
    }

    render() {
        return (
            <Games 
                onGameItemClick = {this.onGameItemClick}
            />            
        )
    }
}

class Games extends Component {
    render() {
        return (
            <ul>
                <li onClick={e => this.props.onGameItemClick(e, "val1(1)", "val2(1)")}>1</li>
                <li onClick={e => this.props.onGameItemClick(e, "val1(2)", "val2(2)")}>2</li>
                <li onClick={e => this.props.onGameItemClick(e, "val1(3)", "val2(3)")}>3</li>
            </ul>
        )
    }
}

ReactDOM.render(
  <User />,
  document.getElementById("root")
);

<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

锂 s表示,并从该列表中获取值:

const { Component } = React;

class User extends Component {

    constructor() {
        super();
        this.onGameItemClick = this.onGameItemClick.bind(this);
    }
    
    onGameItemClick(e, val1, val2) {
        console.log("val1 =", val1, "val2 =", val2);
    }

    render() {
        return (
            <Games 
                onGameItemClick = {this.onGameItemClick}
            />            
        )
    }
}

class Games extends Component {
    constructor(...args) {
      super(...args);
      this.state = {
          items: [
              {text: "1", val1: "val1(1)", val2: "val2(1)"},
              {text: "2", val1: "val1(2)", val2: "val2(2)"},
              {text: "3", val1: "val1(3)", val2: "val2(3)"}
          ]
      };
    }
    render() {
        return (
            <ul>{
                this.state.items.map(obj =>
                    <li onClick={e => this.props.onGameItemClick(e, obj.val1, obj.val2)}>{obj.text}</li>
                )
            }</ul>
        )
    }
}

ReactDOM.render(
  <User />,
  document.getElementById("root")
);

<div id=“root”></div><脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js“></script>

是的,在react中使用回调是可能的。将值作为参数传递给prop事件处理程序函数

下面是ES6版本的实现

const { Component } = React;

class User extends Component {

    constructor() {
        super();
    }

    onGameItemClick = (e, val1, val2) => {
        // i want to get here val1 and val2
        console.log("values", val1, val2);
    }

    render() {
        return (
            <Games 
                onGameItemClick = {this.onGameItemClick}
            />            
        )
    }
}

class Games extends Component {
    render() {
        return (
            <ul>
                <li onClick={e => this.props.onGameItemClick(e, "one", "two")}>1</li>
                <li onClick={e => this.props.onGameItemClick(e, "three", "four")}>2</li>
                <li onClick={e => this.props.onGameItemClick(e, "five", "six")}>3</li>
            </ul>
        )
    }
}

ReactDOM.render(
  <User />,
  document.getElementById("root")
);

你应该把val1和val2作为params传入this.props.onGameItemClick.

例子:

this.props.onGameItemClick(val1,val2)

并在父类中获取该值

onGameItemClick(val1,val2) {
    // you will  get here val1 and val2
}

点击事件,你会得到一个 event 它是本机事件处理程序对象,也是您要查找的对象

父组件(用户.js)

import React from "react";
import Games from "./games";

class User extends React.Component {
  constructor() {
    super();
    this.onGameItemClick = this.onGameItemClick.bind(this);
  }
  onGameItemClick(e, val) {
    // i want to get here val1 and val2
    console.log("e", e.target.value, val);
  }

  render() {
    return <Games onGameItemClick={this.onGameItemClick} />;
  }
}

export default User;

import React from "react";

class Games extends React.Component {
  render() {
    return (
      <ul>
        <li
          onClick={e => this.props.onGameItemClick(e, "val1")}
          val1="one"
          val2="two"
        >
          1
        </li>
        <li
          onClick={e => this.props.onGameItemClick(e, "val2")}
          val1="one"
          val2="two"
        >
          2
        </li>
        <li
          onClick={e => this.props.onGameItemClick(e, "val3")}
          val1="one"
          val2="two"
        >
          3
        </li>
      </ul>
    );
  }
}

export default Games;

可以将方法的引用传递给子组件,并在子组件中的值更改时调用它。

import React from 'react';

export default class User extends React.Component {
  constructor() {
    super();
    this.onGameItemClick = this.onGameItemClick.bind(this);
  }
  onGameItemClick(e, v1, v2) {
    console.log(v1, v2);
    // you also get the event in this function scope
  }

  render() {
    return <Games onGameItemClick={this.onGameItemClick} />;
  }
}

// Games.js file
class Games extends React.Component {
  render() {
    return (
      <ul>
        <li
          onClick={(e) => this.props.onGameItemClick(e,'one', 1)}
          val1="one"
          val2="two"
        >
          1
        </li>
        <li
          onClick={(e) => this.props.onGameItemClick(e, 'two', 2)}
        >
          2
        </li>
        <li
          onClick={(e) => this.props.onGameItemClick(e, 'three', 3)}
          val1="one"
          val2="two"
        >
          3
        </li>
      </ul>
    );
  }
}

解释

我们使用ES6 Arrow函数将事件和参数发送回父组件。