我在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!
}
})
有没有什么办法可以做到这一点。我的逻辑是好的React“世界”?谢谢你的时间。
6条答案
按热度按时间fdx2calv1#
将
Parent
组件中的方法作为prop
向下传递到Child
组件。即:vsmadaxz2#
React16+
子组件
父组件
qhhrdooz3#
为此,您将回调作为属性从父级向下传递给子级。
例如:
在上面的例子中,
Parent
使用value
和onChange
属性调用Child
,Child
返回绑定onChange
处理程序到标准<input />
元素,并将值向上传递到Parent
的回调函数(如果定义了)。因此,
Parent
的changeHandler
方法被调用,第一个参数是Child
中<input />
字段的字符串值。结果是Parent
的状态可以用该值更新,从而导致父元素的<span />
元素在您在Child
的输入字段中键入新值时用新值更新。pprl5pva4#
2019更新react 16+和ES6
由于
React.createClass
从react版本16中被弃用,新的Javascript ES6将给您带来更多好处。母体
儿童
将无状态子进程简化为ES6常量
l7mqbcuq5#
您可以使用任何父方法。为此,您应该像发送任何简单值一样将这些方法从父方法发送到子方法。并且您可以同时使用父方法中的多个方法。例如:
并像这样将其用于Child(用于任何操作或任何子方法):
b4lqfgs46#
使用功能||无状态组件
父组件
子组件