Реагировать JS - Как получить значения события Click от дочернего компонента к родительскому компоненту? - PullRequest
Новая
       7

Реагировать JS - Как получить значения события Click от дочернего компонента к родительскому компоненту?

0 голосов
/ 05 сентября 2018

Предположим, у меня есть имя пользователя класса, и в этом я отображаю имя дочернего компонента «Игры». Итак, я передаю событие в элемент списка игровых компонентов, которое является событием щелчка. я хочу получить значения в моем компоненте пользователя. Так возможно ли это? 

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 голосов
/ 05 сентября 2018

Вы можете передать ссылку на метод дочернему компоненту и вызвать его, когда значение в дочернем компоненте изменится.

Здесь я внес некоторые изменения в ваш код и получил то, что вы должны были сделать. 

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 для отправки события и параметров в родительский компонент.

0 голосов
/ 05 сентября 2018

Да, возможно использование обратных вызовов в реакции. Передать значения в качестве параметров в функцию обработчика события 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")
);
0 голосов
/ 05 сентября 2018

В ваших li s должны быть функции, которые передают значение в обработчик кликов, а не помещают недопустимые свойства / атрибуты в li s.

См. Изменения в 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 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><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>
0 голосов
/ 05 сентября 2018

Вы должны передать событие из этого обработчика щелчка (нативного) и записать его в родительский компонент.

При событии щелчка вы получите event, который является нативным объектом-обработчиком события, и именно его вы бы искали

Родительский компонент (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;
0 голосов
/ 05 сентября 2018

Вы должны передать val1 и val2 в качестве параметров в this.props.onGameItemClick.

Пример: 

this.props.onGameItemClick(val1,val2)

И получить это значение в родительском классе как 

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