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

时间：2018-09-05 05:51:14

标签： javascript reactjs javascript-events event-handling

考虑一下，我有一个类名User，并且我正在渲染子组件名'Games'。所以我在游戏组件列表项上传递了一个事件，即点击事件。我想在我的用户组件中获取值。有可能吗？

const { Component } = React;

class User extends Component {

    constructor() {
        super();
        this.onGameItemClick = this.onGameItemClick.bind(this);
    }
    
    onGameItemClick(e) {
        // i want to get here val1 and val2
    }

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

class Games extends Component {
    render() {
        return (
            <ul>
                <li onClick={this.props.onGameItemClick} val1="one" val2="two">1</li>
                <li onClick={this.props.onGameItemClick} val1="one" val2="two">2</li>
                <li onClick={this.props.onGameItemClick} val1="one" val2="two">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>

这种方式不起作用。由于我什么都没得到。那么还有其他方法可以解决此问题吗？

5 个答案:

答案 0 :(得分：1)

您应该在li上使用将值传递给点击处理程序的函数，而不是在li上放置无效的属性/属性。

查看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>

当然，您可能会有li所代表的一些对象列表，并从该列表中获取值：

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><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>

答案 1 :(得分：1)

是的，可以在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")
);

答案 2 :(得分：0)

您应该在此prop.onGameItemClick中将val1和val2作为参数传递。

示例：

this.props.onGameItemClick(val1,val2)

并在父类中以

的形式获取此值 
onGameItemClick(val1,val2) {
    // you will  get here val1 and val2
}

答案 3 :(得分：0)

您应该传递该点击处理程序（本机事件）中的事件，并将其捕获到父组件中。

在单击事件上，您将获得一个event，它是本机事件处理程序对象，而这正是您要查找的对象<​​/ p>

父组件（User.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;

子组件（games.js）

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;

答案 4 :(得分：0)

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

我在这里对您的代码进行了一些更改，并实现了您应该做的事情。

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函数将事件和参数发送回父组件。

相关问题
最新问题