ReactJS调用父方法
ReactJS调用父方法
提问于 2014-10-03 17:29:09
我正在迈出ReactJS的第一步，并试图理解父母和孩子之间的沟通。我正在制作表单，所以我有一个用于设置字段样式的组件。我也有父组件，包括字段和检查它。示例：
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!
}
})有没有办法做到这一点。我的逻辑在reactjs的“世界”里是好的吗？耽误您时间，实在对不起。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-10-08 03:40:12
使用react 16+和ES6更新2019年
发布这篇文章是因为react版本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;Stack Overflow用户
发布于 2014-10-03 21:40:47
要做到这一点，您需要将一个回调作为属性从父对象向下传递给子对象。
例如：
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 />元素更新为新值。
Stack Overflow用户
发布于 2017-01-15 19:17:51
您可以使用任何父方法。为此，您应该像发送任何简单的值一样，将此方法从您的父级发送到您的子级。而且您可以同时使用父级中的许多方法。例如：
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} />);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26176519
复制相关文章
相似问题