Чи не існує простого способу передавати дитину propsсвоєму батькові, використовуючи події, в React.js?

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

Я знаю, що ви можете використовувати керовані компоненти для передачі значення вводу, але було б непогано передати весь комплект n 'kaboodle. Іноді дочірній компонент містить набір інформації, яку вам не доведеться шукати.

Можливо, є спосіб прив’язати компонент до події?

ОНОВЛЕННЯ - 1.09.2015

Після використання React протягом року і підштовхуваної відповіддю Себастьєна Лорбера, я дійшов висновку, що передача дочірніх компонентів як аргументів до функцій у батьків насправді не є способом React, і це ніколи не було доброю ідеєю. Я змінив відповідь.

Редагувати : див. Кінцеві приклади оновлених прикладів ES6.

Ця відповідь просто стосується випадку прямих стосунків батько-дитина. Коли у батька та дитини потенційно багато посередників, перевірте цю відповідь .

В інших рішеннях не вистачає сенсу

Хоча вони все ще працюють добре, в інших відповідях пропускається щось дуже важливе.

Чи не існує простого способу передавати реквізит дитині своєму батькові, використовуючи події, в React.js?

У батька вже є ця дочірня підтримка! : якщо у дитини є опора, то це тому, що її батько надав таку підтримку дитині! Чому ви хочете, щоб дитина повернула опору батькові, тоді як батько, очевидно, вже має цю опору?

Краще впровадження

Дитина : насправді це не повинно бути складніше за це.

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Батько з одинокою дитиною : використовуючи значення, яке воно передає дитині

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // You can access the prop you pass to the children 
     // because you already have it! 
     // Here you have it in state but it could also be
     //  in props, coming from another parent.
     alert("The Child button text is: " + this.state.childText);
     // You can also access the target of the click here 
     // if you want to do some magic stuff
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

Батько зі списком дітей : у вас все ще є все необхідне на батьків і не потрібно ускладнювати дитину.

var Parent = React.createClass({
  getInitialState: function() {
     return {childrenData: [
         {childText: "Click me 1!", childNumber: 1},
         {childText: "Click me 2!", childNumber: 2}
     ]};
  },
  render: function () {
    var children = this.state.childrenData.map(function(childData,childIndex) {
        return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
    }.bind(this));
    return <div>{children}</div>;
  },

  handleChildClick: function(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

Можна також використовувати this.handleChildClick.bind(null,childIndex)і потім використовуватиthis.state.childrenData[childIndex]

Зауважте, що ми зв'язуємося з nullконтекстом, оскільки в іншому випадку React надсилає попередження, пов’язане з його системою автозахисту . Використання null означає, що ви не хочете змінювати контекст функції. Дивіться також .

Про інкапсуляцію та з'єднання в інших відповідях

Це для мене погана ідея в плані сполучення та інкапсуляції:

var Parent = React.createClass({
  handleClick: function(childComponent) {
     // using childComponent.props
     // using childComponent.refs.button
     // or anything else using childComponent
  },
  render: function() {
    <Child onClick={this.handleClick} />
  }
});

Використання реквізиту : Як я пояснив вище, реквізит у вас уже є у батьків, тому марно передавати весь дочірній компонент для доступу до реквізиту.

Використання посилань : у вас уже є ціль кліку в події, і в більшості випадків цього достатньо. Крім того, ви могли використати посилання безпосередньо на дитину:

<Child ref="theChild" .../>

І отримати доступ до вузла DOM у батьківській програмі за допомогою

React.findDOMNode(this.refs.theChild)

У більш складних випадках, коли ви хочете отримати доступ до декількох запитів дитини у батьків, дитина може передавати всі вузли дому безпосередньо у зворотному дзвінку.

Компонент має інтерфейс (реквізит) і батько не повинен припускати нічого про внутрішню роботу дитини, включаючи його внутрішню структуру DOM або про те, які вузли DOM він оголошує реф. Батько, який використовує реферат дитини, означає, що ви щільно з'єднаєте 2 компоненти.

Для ілюстрації проблеми я візьму цю цитату про Shadow DOM , який використовується у веб-переглядачах для відображення таких речей, як слайдери, смуги прокрутки, відеоплеєри ...:

Вони створили межу між тим, що ви, веб-розробник, можете досягти, і тим, що вважається деталями реалізації, таким чином недоступним для вас. Браузер, однак, може перейти через цю межу за бажанням. Завдяки цій межі вони змогли створити всі HTML-елементи за допомогою тих самих старих веб-технологій із знаків і прольотів, як і ви.

Проблема полягає в тому, що якщо ви дозволите, щоб деталі реалізації дитини просочилися до батьків, вам дуже важко переробити дитину, не впливаючи на батьків. Це означає, що як автор бібліотеки (або як редактор браузера з Shadow DOM) це дуже небезпечно, оскільки ви дозволяєте клієнту надто багато доступу, що робить його дуже важким для оновлення коду, не порушуючи ретросумісності.

Якщо Chrome реалізував смугу прокрутки, дозволяючи клієнту отримувати доступ до внутрішніх вузлів дому цієї смуги прокрутки, це означає, що у клієнта може бути можливість просто зламати цю смугу прокрутки, і що додатки зруйнуються легше, коли Chrome виконає автоматичне оновлення після рефакторингу смуга прокрутки ... Натомість вони надають доступ лише до деяких безпечних речей, таких як налаштування деяких частин смуги прокрутки за допомогою CSS.

Про використання будь-чого іншого

Передача всього компонента у зворотному дзвінку небезпечна і може змусити початківців розробників робити дуже дивні речі, такі як дзвінки childComponent.setState(...)або childComponent.forceUpdate(), або привласнюючи їм нові змінні, всередині материнської служби, що робить весь додаток набагато складнішим.

Редагувати: приклади ES6

Оскільки багато людей зараз використовують ES6, ось такі самі приклади синтаксису ES6

Дитина може бути дуже простою:

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
    {text}
  </button>
)

Батьком може бути або клас (і він може врешті-решт керувати станом, але я передаю це як реквізит тут:

class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}

Але це також може бути спрощено, якщо йому не потрібно керувати станом:

const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
                    alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

JsFiddle

PERF ПОПЕРЕДЖЕННЯ (застосовується до ES5 / ES6): якщо ви використовуєте PureComponentабо shouldComponentUpdate, вищезазначені реалізації не будуть оптимізовані за замовчуванням, оскільки використання onClick={e => doSomething()}або зв'язування безпосередньо під час фази візуалізації, оскільки це створюватиме нову функцію щоразу, коли батько надає. Якщо це вузьке вузьке місце у вашому додатку, ви можете передавати дані дітям та повторно вводити їх у "стабільний" зворотний виклик (встановлений у батьківському класі та прив’язаний до thisконструктора класів), щоб PureComponentоптимізація могла спричинити вас, або ви може реалізовувати свій власний shouldComponentUpdateі ігнорувати зворотний виклик під час перевірки порівняння реквізиту.

Ви також можете скористатись бібліотекою " Рекомендувати" , яка забезпечує компоненти більш високого порядку для досягнення тонких налаштувань:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

У цьому випадку ви можете оптимізувати дочірній компонент, використовуючи:

const OptimizedChild = onlyUpdateForKeys(['text'])(Child)

Оновлення (9/1/15): ОП зробило це питання дещо рухомою ціллю. Він був оновлений знову. Отже, я відчуваю відповідальність за оновлення своєї відповіді.

По-перше, відповідь на ваш наданий приклад:

Так, це можливо.

Ви можете вирішити це, оновивши програму Child onClickна this.props.onClick.bind(null, this):

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
  }
});

Потім обробник подій у Вашому Батьку може отримати доступ до компонента та події так:

  onClick: function (component, event) {
    // console.log(component, event);
  },

Знімок JSBin

Але саме питання вводить в оману

Батько вже знає дитину props.

Це не зрозуміло в наведеному прикладі, оскільки реквізит насправді не надається. Цей зразок коду може краще підтримувати запитання:

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }
});

На цьому прикладі стає набагато зрозуміліше, що ви вже знаєте, що таке реквізит дитини.

Знімок JSBin

Якщо це справді про використання реквізиту для дитини ...

Якщо це справді про використання реквізиту для дитини, ви можете взагалі уникнути будь-якого пошуку з дитиною.

JSX має API атрибутів поширення, які я часто використовую на таких компонентах, як Child. Він займає всі propsі застосовує їх до компонента. Дитина виглядатиме так:

var Child = React.createClass({
  render: function () {
    return <a {...this.props}> {this.props.text} </a>;
  }
});

Дозволяє вам використовувати значення безпосередньо в Батькові:

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }
});

Знімок JSBin

І не потрібно додаткової конфігурації під час пошуку додаткових дочірніх компонентів

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: "Click here",
      text2: "No, Click here",
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }
});

Знімок JSBin

Але я підозрюю, що це не ваш фактичний випадок використання. Тож давайте копаємо далі…

Надійний практичний приклад

Про загальний характер наведеного прикладу важко говорити. Я створив компонент, який демонструє практичне використання для вищезазначеного питання, реалізованого дуже реактивно :

Приклад роботи
DTServiceCalculator DTServiceCalculator repo

Цей компонент - простий калькулятор обслуговування. Ви надаєте йому список послуг (із назвами та цінами), і він обчислить загально обрані ціни.

Діти блаженно неосвічені

ServiceItemє дочірнім компонентом у цьому прикладі. Не має багато думок про зовнішній світ. Для цього потрібно кілька реквізитів , один з яких - функція, яку потрібно викликати при натисканні на неї.

<div onClick={this.props.handleClick.bind(this.props.index)} />

Це не що інше, як викликати наданий handleClickзворотний дзвінок за допомогою наданого index[ джерела ].

Батьки - діти

DTServicesCalculatorє батьківський компонент, це приклад. Це теж дитина. Давай подивимося.

DTServiceCalculatorстворює список дочірніх компонентів ServiceItemі надає їм реквізити [ джерело ]. Це батьківський компонент, ServiceItemале це дочірній компонент компонента, що передає йому список. Він не володіє даними. Таким чином, він знову делегує обробку компонента своєму вихідному компоненту- джерелу

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItemфіксує індекс, переданий від дитини, і надає його своєму батьків [ джерело ]

handleServiceClick (index) {
  this.props.onSelect(index);
}

Власники знають все

Концепція "Власність" є важливою в Реакті. Рекомендую прочитати більше про це тут .

У прикладі, який я показав, я продовжую делегувати обробку події вгору до дерева компонентів, поки ми не перейдемо до компонента, який належить державі.

Коли ми нарешті потрапимо туди, ми обробляємо вибір / відміни стану так ( джерело ):

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });
}

Висновок

Спробуйте зберегти ваші зовнішні компоненти як можна більш непрозорими. Прагніть переконатися, що вони мають дуже мало уподобань щодо того, як батьківський компонент може вибрати для їх реалізації.

Слідкуйте за тим, кому належать дані, якими ви маніпулюєте. У більшості випадків вам потрібно буде делегувати події, обробляючи дерево, на компонент, який володіє цим станом.

Убік: шаблон Flux - це хороший спосіб зменшити цей тип необхідних підключень у додатках.

Здається, відповідь проста. Врахуйте це:

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick.bind(null, this)}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(component, event) {
    component.props // #=> {Object...}
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

Ключ виклик bind(null, this)на this.props.onClickподію, передається від батьків. Тепер OnClick функція приймає аргументи component, І event. Я думаю, що це найкраще з усіх світів.

ОНОВЛЕННЯ: 1.09.2015

Це була погана ідея: пускати інформацію про впровадження дитини у батьків ніколи не було хорошим шляхом. Дивіться відповідь Себастьєна Лорбера.

Питання в тому, як передавати аргумент від дочірнього до батьківського компонента. Цей приклад простий у використанні та тестується:

//Child component
class Child extends React.Component {
    render() {
        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div>
        )
    }
}

//Parent component
class Parent extends React.Component {
    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
    }

    handleToUpdate(someArg){
        alert('We pass argument from Child to Parent: \n' + someArg);
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;
        return (<div>
          <Child handleToUpdate = {handleToUpdate.bind(this)} />
        </div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <Parent />,
        document.querySelector("#demo")
    );
}

Подивіться на JSFIDDLE

В основному ви використовуєте реквізит, щоб надсилати інформацію до дітей та батьків.

Додавши до всіх чудових відповідей, дозвольте навести простий приклад, який пояснює передачу значень від дочірнього до батьківського компонента в React

App.js

class App extends React.Component {
      constructor(){
            super();
            this.handleFilterUpdate = this.handleFilterUpdate.bind(this);
            this.state={name:'igi'}
      }
      handleFilterUpdate(filterValue) {
            this.setState({
                  name: filterValue
            });
      }
   render() {
      return (
        <div>
            <Header change={this.handleFilterUpdate} name={this.state.name} />
            <p>{this.state.name}</p>
        </div>
      );
   }
}

Header.js

class Header extends React.Component {
      constructor(){
            super();
            this.state={
                  names: 'jessy'
            }
      }
      Change(event) {

      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

   render() {
      return (
       <button onClick={this.Change.bind(this)}>click</button>

      );
   }
}

Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Це все, тепер ви можете передавати значення від свого клієнта на сервер.

Погляньте на функцію Змінення в Header.js

Change(event) {
      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

Це те, як ви натискаєте значення в реквізит від клієнта до сервера

Ось проста 3-ступінчаста реалізація ES6 з використанням функції прив'язки в батьківському конструкторі. Це перший спосіб, який рекомендує офіційний підручник з реагування (тут також не висвітлено синтаксис полів публічного класу). Ви можете знайти всю цю інформацію тут https://reactjs.org/docs/handling-events.html

Прив’язування батьківських функцій, щоб діти могли їх телефонувати (і передавати дані батькові!: D)

1. Переконайтеся, що в батьківському конструкторі ви зв’язуєте функцію, яку ви створили в батьківському
2. Передайте прив’язану функцію до дитини як опора (Ні лямбда, тому що ми передаємо функцію ref)
3. Виклик зв'язаної функції з дочірньої події (Лямбда! Ми викликаємо функцію, коли подія запускається. Якщо ми цього не зробимо, функція автоматично запуститься при завантаженні і не буде запускатися події.)

Батьківська функція

handleFilterApply(filterVals){} 

Конструктор батьків

this.handleFilterApply = this.handleFilterApply.bind(this);

Реквізит, переданий дитині

onApplyClick = {this.handleFilterApply}

Дзвінок на подію дитини

onClick = {() => {props.onApplyClick(filterVals)}

Це приклад без використання події onClick. Я просто передаю дитині функцію зворотного дзвінка. Після цього зворотного дзвінка дочірній дзвінок також надсилає дані назад. Мене надихнули приклади в документах .

Невеликий приклад (це у файлах tsx, тому реквізити та стани повинні бути оголошені повністю, я видалив деяку логіку з компонентів, тому це менше коду).

* Оновлення: Важливо - прив’язати це до зворотного дзвінка, інакше зворотний виклик має область дитини, а не батьків. Єдина проблема: це "старий" батько ...

SymptomChoser є батьківським:

interface SymptomChooserState {
  // true when a symptom was pressed can now add more detail
  isInDetailMode: boolean
  // since when user has this symptoms
  sinceDate: Date,
}

class SymptomChooser extends Component<{}, SymptomChooserState> {

  state = {
    isInDetailMode: false,
    sinceDate: new Date()
  }

  helloParent(symptom: Symptom) {
    console.log("This is parent of: ", symptom.props.name);
    // TODO enable detail mode
  }

  render() {
    return (
      <View>
        <Symptom name='Fieber' callback={this.helloParent.bind(this)} />
      </View>
    );
  }
}

Ознакою є дитина (у реквізиті дитини я оголосив функцію зворотного дзвінка, у вибраній функціїSimptom викликається зворотний виклик):

interface SymptomProps {
  // name of the symptom
  name: string,
  // callback to notify SymptomChooser about selected Symptom.
  callback: (symptom: Symptom) => void
}

class Symptom extends Component<SymptomProps, SymptomState>{

  state = {
    isSelected: false,
    severity: 0
  }

  selectedSymptom() {
    this.setState({ isSelected: true });
    this.props.callback(this);
  }

  render() {
    return (
      // symptom is not selected
      <Button
        style={[AppStyle.button]}
        onPress={this.selectedSymptom.bind(this)}>
        <Text style={[AppStyle.textButton]}>{this.props.name}</Text>
      </Button>
    );
  }
}