ReactJS Form dan Condition Rendering
Mengenal Event onChange
+Bind `this` ke `onSeriesChange`
Selain method-method bawaan React tidak memiliki 'this' yang benar mengacu ke class yang dimaksud.
constructor(props) {
super(props);
this.onSeriesChange = this.onSeriesChange.bind(this);
}
+Method yang dipanggil
onSeriesChange(e) {
alert("hei tayo!");
console.log(e.target.value);
}
+Pemanggilan Method
render() {
return (
<div>
<div>Total series adalah: {this.state.series.length}</div>
<input type="text" onChange={this.onSeriesChange}/>
<SeriesList list={this.state.series} />
</div>
);
}
Implementasi onSeriesChange
onSeriesChange(e) {
fetch(`http://api.tvmaze.com/search/shows?q=${e.target.value}`).then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
this.setState({series: json})
});
}
Penampakan di Browser
Conditional Rendering
Menggunakan kondisi berdasarkan status value dari state untuk merender view yang dinamis dan berbeda-beda berdasarkan value.+State
state = {
series: [],
seriesName: '',
isFetching: false
}
+Fetching Method
onSeriesChange(e) {
this.setState({seriesName: e.target.value, isFetching:true})
fetch(`http://api.tvmaze.com/search/shows?q=${e.target.value}`).then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
this.setState({series: json, isFetching: false})
});
}
+Render dengan Kondisi Tertentu
render() {
const {series, seriesName, isFetching} = this.state;
return (
<div>
<input value={seriesName} type="text" onChange={this.onSeriesChange}/>
{
series.length==0 && seriesName.trim() === ''
&&
<p>Please enter series name to the input</p>
}
{
series.length==0 && seriesName.trim() !== ''
&&
<p>No series found!</p>
}
<SeriesList list={this.state.series} />
</div>
);
}
+Hasil di Browser
 |
| Data tidak ditemukan. |
 |
| Data ditemukan. |
Menambahkan Loading...
render() {
const {series, seriesName, isFetching} = this.state;
return (
<div>
<input value={seriesName} type="text" onChange={this.onSeriesChange}/>
{
series.length==0 && seriesName.trim() === ''
&&
<p>Please enter series name to the input</p>
}
{
series.length==0 && seriesName.trim() !== ''
&&
<p>No series found!</p>
}
{isFetching && <p>Is loading...</p>}
{
<SeriesList list={this.state.series} />
}
</div>
);
}
+Memberi Image Loading
+Component Loading
+Render
{isFetching && <p> <Loader/> </p>}
+Hasil di Browser
Sumber
https://www.udemy.com/react-fundamentals/learn/lecture/9167802#overview
https://github.com/goatslacker/alt/issues/283
https://www.udemy.com/react-fundamentals/learn/lecture/9177778#overview
https://reactjs.org/docs/conditional-rendering.html
Comments
Post a Comment