ReactJS parent method call

Question

I am taking my first step in ReactJS and trying to understand the relationship between parents and children. I am making a form, so I have a component for field styles. And also I have a parent component that includes a field and validating it. Example:

var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { ... }, handleChange: function(event) { //call parent! } }) 

Is there any way to do this. And is my logic good at the reaction of the "world"? Thank you for your time.

Answer 1

To do this, you pass the callback as a property with a child of the parent.

For example:

 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} /> ); } }); 

In the above example, Parent calls Child with the value and onChange . The returned Child binds the onChange handler to the standard <input /> element and passes the value until the Parent callback, if one is defined.

As a result, the Parent changeHandler method is changeHandler with the first argument being the string value from the <input /> field in Child . As a result, the Parent state can be updated with this value, as a result of which the parent <span /> element will be updated with the new value when you enter it in the Child input field.

Answer 2

You can use any parent methods. To do this, you must send these methods from your parent to yourself, as to any simple value. And you can use many methods from the parent at the same time. For example:

 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} />); } }); 

And use it in Child like this (for any actions or in any child methods):

 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} />); } }); 

Answer 3

2019 update with 16+ and ES6 responsiveness

Publishing this since React.createClass deprecated compared to version 16, and the new Javascript ES6 will give you more benefits.

parent

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

Children

 import React, {Component} from 'react'; export default class Child extends Component { render () { return ( <div> <h1 onClick= { () => this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>) } > Something</h1> </div> ) } } 

Simplified stateless child as SE6 constant

 import React from 'react'; const Child = () => { return ( <div> <h1 onClick= { () => this.props.es6Function(<SomethingThatYouWantToPassIn>) } > Something</h1> </div> ) } export default Child; 

Answer 4

You can also do this using custom javascript events, a jQuery example:

 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"); 

Remember to limit the use of this solution to “static” React components in order to avoid too many logged events that you may have forgotten to undo.

Answer 5

Pass the method from the Parent component as prop your Child component. i.e:

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

Answer 6

React 16+

Child component

 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; 

Parent component

 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;