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

Question

假设我有一个类名 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>

这个方法行不通。因为我没有得到任何事件。那么有没有其他方法可以解决这个问题，或者这是不可能的？

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