React JS Yazalım 1
Parent componentini Child1 ve Child2 componenti ile güncelleyelim.
Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise child2 componentimde.
Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim
1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem.
2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak.
https://codesandbox.io/s/p7qokl5nkm
Burada önemli olan kısım. Üst scope deki methodu parent Komponentime bind etmem
Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise child2 componentimde.
Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim
1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem.
2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak.
import React, { Component } from "react";
class Child1 extends Component {
render() {
this.state = {
name: ""
}
return (
<div>
<label>
Name:
</label>
<br/>
<input
type="text"
placeholder="Name"
onChange={e => this.props.updateTextCB(e.target.value)}
/>
</div>
);
}
}
class Child2 extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<label>
PassWord:
</label>
<br />
<input
type="text"
placeholder="Write password"
onChange={e => updateText2(e.target.value)}
/>
</div>
);
}
}
function updateText2(text) {
this.setState({ password:text });
}
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
name: "Initial Name",
password:"Inıtial Password"
};
this.updateText1 = this.updateText1;
updateText2 = updateText2.bind(this);
}
updateText1 = text => {
this.setState({ name:text });
};
render() {
console.log(this.state);
return (
<div>
<div>I am Parent</div>
<div>{this.state.name}</div>
<div>{this.state.password}</div>
<Child1 updateTextCB={this.updateText1} />
<Child2 />
</div>
);
}
}
export default Parent;
https://codesandbox.io/s/p7qokl5nkm
Burada önemli olan kısım. Üst scope deki methodu parent Komponentime bind etmem
Yorumlar
Yorum Gönder