小开

为此，您需要将回调作为属性从父级向下传递给子级。

例如:

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使用属性 value和 onChange调用 Child。返回的 Child将 onChange处理程序绑定到一个标准的 <input />元素，如果定义了该值，则将该值传递给 Parent的回调函数。

因此，调用 Parent的 changeHandler方法时，第一个参数是来自 Child中的 <input />字段的字符串值。结果是 Parent的状态可以用这个值更新，当您在 Child的输入字段中键入这个值时，会导致父 <span />元素用这个新值更新。

小开

可以使用任何父方法。为此，您应该像发送任何简单值一样，将这个方法从您的父级发送给您的子级。您可以同时使用来自父级的多个方法。例如:

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

小开

最佳答案

2019年最新情况，包括反应16 + 和 ES6

由于反应版本16不推荐使用 React.createClass，新的 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>
)
}
}

简化为 ES6常量的无状态子级

import React from 'react';


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


}
export default Child;

小开

将方法从 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>
)

小开

反应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;

小开

使用函数 | | 无状态组件

父组件

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


export default function Parent(){


const handleParentFun = (value) =>{
console.log("Call to Parent Component!",value);
}


return (
<>
This is Parent Component
<ChildComponent
handleParentFun = {(value) => {
console.log("your value -->",value);
handleParentFun(value);
}}
/>
</>
);
}

子组件

import React from "react";




export default function ChildComponent(props){
return(
<>
This is Child Component
<button onClick={props.handleParentFun("Your Value")}>
Call to Parent Component Function
</button>
</>
);
}

ReactJS 调用父方法

2019年最新情况，包括反应16 + 和 ES6