我正在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“ world”上好吗?谢谢你的时间。
2019更新带有React 16+和ES6
由于React.createClass
从react版本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 = () => {
return (
<div>
<h1 onClick= { () =>
this.props.es6Function(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
export default Child;
为此,您需要将回调作为属性从父级传递给子级。
例如:
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
具有value
和属性的调用onChange
。的Child
回报结合一个onChange
处理程序,以一个标准的<input />
元件,并传递值到Parent
如果它定义的回调函数。
结果,使用Parent
的changeHandler
方法被调用,第一个参数是的<input />
字段中的字符串值Child
。结果是Parent
可以使用该值更新的状态,从而导致在<span />
您在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} />);
}
});
将方法从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>
)
使用功能|| 无状态组件
父组件
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>
</>
);
}
反应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;
本文地址:http://javascript.askforanswer.com/reactjsdiaoyongfufangfa.html
文章标签:javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!