Ответ 1

Для этого вы передаете обратный вызов как свойство с дочерним элементом родителя.

Например:

var Parent = React.createClass({

    getInitialState: function() {
        return {
            value: 'foo'
        }
    },

    changeHandler: function(value) {
        this.setState({
            value: value
        });
    },

    render: function() {
        return (
            <div>
                <Child value={this.state.value} onChange={this.changeHandler} />
                <span>{this.state.value}</span>
            </div>
        );
    }
});

var Child = React.createClass({
    propTypes: {
        value:      React.PropTypes.string,
        onChange:   React.PropTypes.func
    },
    getDefaultProps: function() {
        return {
            value: ''
        };
    },
    changeHandler: function(e) {
        if (typeof this.props.onChange === 'function') {
            this.props.onChange(e.target.value);
        }
    },
    render: function() {
        return (
            <input type="text" value={this.props.value} onChange={this.changeHandler} />
        );
    }
});

В приведенном выше примере Parent вызывает Child с свойством value и onChange. Возвращаемый Child привязывает обработчик onChange к стандартному элементу <input /> и передает значение до обратного вызова Parent, если он определен.

В результате вызывается метод Parent changeHandler с первым аргументом, являющимся строковым значением из поля <input /> в Child. В результате состояние Parent может быть обновлено с этим значением, в результате чего родительский элемент <span /> обновится с новым значением при вводе его в поле ввода Child.

Ответ 2

Вы можете использовать любые родительские методы. Для этого вы должны отправить эти методы от своего родителя к себе, как к любому простому значению. И вы можете одновременно использовать много методов от родителя. Например:

var Parent = React.createClass({
    someMethod: function(value) {
        console.log("value from child", value)
    },
    someMethod2: function(value) {
        console.log("second method used", value)
    },
    render: function() {
      return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />);
    }
});

И используйте его в Child как это (для любых действий или в любых дочерних методах):

var Child = React.createClass({
    getInitialState: function() {
      return {
        value: 'bar'
      }
    },
    render: function() {
      return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />);
    }
});

Ответ 3

Обновление 2019 года с реагированием 16+ и ES6

Публикация этого, поскольку React.createClass устарела по сравнению с версией 16, а новый Javascript ES6 даст вам больше преимуществ.

родитель

import React, {Component} from 'react';
import Child from './Child';

export default class Parent extends Component {

  es6Function = (value) => {
    console.log(value)
  }

  simplifiedFunction (value) {
    console.log(value)
  }

  render () {
  return (
    <div>
    <Child
          es6Function = {this.es6Function}
          simplifiedFunction = {this.simplifiedFunction} 
        />
    </div>
    )
  }

}

Детский

import React, {Component} from 'react';

export default class Child extends Component {

  render () {
  return (
    <div>
    <h1 onClick= { () =>
            this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
          }
        > Something</h1>
    </div>
    )
  }
}

Упрощенный ребенок без гражданства как константа SE6

import React from 'react';

const Child = () => {
  return (
    <div>
    <h1 onClick= { () =>
        this.props.es6Function(<SomethingThatYouWantToPassIn>)
      }
      > Something</h1>
    </div>
  )

}
export default Child;

Ответ 4

Вы также можете сделать это с помощью пользовательских событий javascript, пример jQuery:

var YourComponent = React.createClass({

    componentDidMount: function(){

        // Register event (the name is just an example of namespacing)
        $(document).on("ReactComponent:YourComponent:myCustomMethod", this.myCustomMethod);
    },

    myCustomMethod: function(){

        // code
    },

    render: function(){
        return (
            // jsx
        )
    }
});

// Trigger event from everywhere
$(document).trigger("ReactComponent:YourComponent:myCustomMethod");

Не забудьте ограничить использование этого решения "статическими" компонентами React, чтобы избежать слишком большого количества зарегистрированных событий, которые вы, возможно, забыли отменить.

Ответ 5

Передайте метод из Parent компонента в качестве prop вашему Child компоненту. то есть:

export default class Parent extends Component {
  state = {
    word: ''
  }

  handleCall = () => {
    this.setState({ word: 'bar' })
  }

  render() {
    const { word } = this.state
    return <Child handler={this.handleCall} word={word} />
  }
}

const Child = ({ handler, word }) => (
<span onClick={handler}>Foo{word}</span>
)

Ответ 6

Реагировать 16+

Дочерний компонент

import React from 'react'

class ChildComponent extends React.Component
{
    constructor(props){
        super(props);       
    }

    render()
    {
        return <div>
            <button onClick={()=>this.props.greetChild('child')}>Call parent Component</button>
        </div>
    }
}

export default ChildComponent;

Родительский компонент

import React from "react";
import ChildComponent from "./childComponent";

class MasterComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state={
            master:'master',
            message:''
        }
        this.greetHandler=this.greetHandler.bind(this);
    }

    greetHandler(childName){
        if(typeof(childName)=='object')
        {
            this.setState({            
                message:'this is ${this.state.master}'
            });
        }
        else
        {
            this.setState({            
                message:'this is ${childName}'
            });
        }

    }

    render()
    {
        return <div>
           <p> {this.state.message}</p>
            <button onClick={this.greetHandler}>Click Me</button>
            <ChildComponent greetChild={this.greetHandler}></ChildComponent>
        </div>
    }
}
export default  MasterComponent;