我正在 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“世界”中是否良好？谢谢你的时间。
为此，您将回调作为属性从父级传递给子级。
例如：
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具有valueand属性onChange。的Child回报结合一个onChange处理程序，以一个标准的<input />元件，并传递值到Parent如果它定义的回调函数。
结果，Parent的changeHandler方法被调用，第一个参数是 中<input />字段的字符串值Child。结果是Parent可以使用该值更新 的状态，从而导致父<span />元素在您在Child的输入字段中键入时使用新值进行更新。
发布此内容是因为React.createClassReact 版本 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>
)
}
}
将无状态子节点简化为 ES6 常量
import React from 'react';
const Child = (props) => {
return (
<div>
<h1 onClick= { () =>
props.es6Function(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
export default Child;
您可以使用任何父方法。为此，您应该像任何简单的值一样将这些方法从您的父母发送给您的孩子。并且您可以一次使用来自父级的多种方法。例如：
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} />);
}
});
使用函数 || 无状态组件
父组件
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("YoureValue")}>
Call to Parent Component Function
</button>
</>
);
}
将Parent组件中的方法作为 aprop传递给您的Child组件。IE：
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>
)