Ik zet mijn eerste stap in ReactJS en probeer de communicatie tussen ouder en kinderen te begrijpen.
Ik ben vorm aan het maken, dus ik heb de component voor het opmaken van velden. En ik heb ook een bovenliggende component die een veld bevat en het controleert. Voorbeeld:
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!
}
})
Is er een manier om dit te doen. En is mijn logica goed in de “wereld” van reactjs? Bedankt voor uw tijd.
Antwoord 1, autoriteit 100%
Hiervoor geef je een terugbelverzoek door aan het kind van de ouder.
Bijvoorbeeld:
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} />
);
}
});
In het bovenstaande voorbeeld roept ParentChildaan met de eigenschap valueen onChange. De Childop zijn beurt bindt een onChange-handler aan een standaard <input />-element en geeft de waarde door aan de Parent‘s callback als het is gedefinieerd.
Als resultaat wordt de Parent‘s changeHandlermethode aangeroepen met als eerste argument de stringwaarde van de <input />veld in het Child. Het resultaat is dat de status van de Parentkan worden bijgewerkt met die waarde, waardoor het element <span />van de ouder wordt bijgewerkt met de nieuwe waarde terwijl u deze typt in het invoerveld van Child.
Antwoord 2, autoriteit 46%
2019 Update met react 16+ en ES6
Dit plaatsen omdat React.createClassis verouderd vanaf versie 16 van react en de nieuwe Javascript ES6 je meer voordelen geeft.
Ouder
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>
)
}
}
Kind
import React, {Component} from 'react';
export default class Child extends Component {
render () {
return (
<div>
<h1 onClick= { () =>
this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
}
Vereenvoudigd staatloos kind als ES6-constante
import React from 'react';
const Child = (props) => {
return (
<div>
<h1 onClick= { () =>
props.es6Function(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
export default Child;
Antwoord 3, autoriteit 35%
U kunt alle bovenliggende methoden gebruiken. Hiervoor moet je deze methoden van je ouder naar je kind sturen zoals elke eenvoudige waarde. En u kunt veel methoden van de ouder tegelijk gebruiken. Bijvoorbeeld:
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} />);
}
});
En gebruik het als volgt in het kind (voor elke actie of voor elke kindmethode):
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} />);
}
});
Antwoord 4, autoriteit 6%
Functie gebruiken || staatloze component
Oudercomponent
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);
}}
/>
</>);
}
Kindercomponent
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>
</>
);
}
Antwoord 5, autoriteit 2%
Geef de methode van de Parent-component door als een propnaar uw Child-component.
dat wil zeggen:
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>
)
Antwoord 6
Reageer 16+
Kindercomponent
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;
Oudercomponent
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;