<section class="section">
<div class="content">
<dl>
<dt class="has-text-info">Higher-order Component</dt>
<dd>Teknik komposisi untuk bikin komponen baru dari komponen yang udah ada tanpa subclass/inheritance.</dd>
</dl>
</div>
<div class="panel">
<div class="panel-heading">Sample App</div>
<!-- sample app -->
<div id="app" class="panel-block">
</div>
</div>
</section>
form{
width:100%;
}
const MyInput = props => (
<input
disabled={props.disabled}
type="text"
className="input"
placeholder={props.inputPlaceholder}
value={props.inputValue}
onChange={props.inputOnChange}
/>
);
//Higher-order Component 1
//return: Functional (stateless) component
const WithLabel = Component => {
return props => (
<div className="field">
<label className="label">{props.label}</label>
<div className="control">
<Component {...props} />
</div>
</div>
);
};
//HOC 2
//komponen yang punya checkbox utk disable/enable
//return: Stateful component
const ToggleAble = Component =>{
return class extends React.Component{
constructor(props){
super(props);
this.state = {
enabled: false
}
}
toggleComponent(e){
this.setState({
enabled: e.target.checked
})
}
render(){
const props = this.props;
const enabled = this.state.enabled;
return (
<div className="field">
<div className="control">
<input type="checkbox"
onChange={this.toggleComponent.bind(this)} /> {props.checkboxLabel}
<Component disabled={!enabled} {...props} />
</div>
</div>
)
}
}
}
const InputWithLabel = WithLabel(MyInput);
const ToggleAbleInput = ToggleAble(MyInput);
////////////////// FORM
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
isChecked: false
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
this.submit = this.submit.bind(this);
}
handleNameChange(e) {
//stop event biar name input.value
//nggak langsung diupdate
e.preventDefault();
this.setState({
//konversi ke huruf besar
name: e.target.value.toUpperCase()
});
}
handleCheckboxChange(e) {
this.setState({
isChecked: !this.state.isChecked
});
}
submit(e) {
e.preventDefault();
alert(JSON.stringify(this.state));
}
render() {
return (
<form>
<InputWithLabel
label="Enter Name"
inputOnChange={this.handleNameChange}
inputValue={this.state.name}
inputPlaceholder="Enter name here"/>
<ToggleAbleInput
checkboxLabel="Aktifin input di bawah"
inputOnChange={this.handleNameChange}
inputValue={this.state.name}
inputPlaceholder="Cek dulu checkbox di atas"/>
<button className="button is-info" onClick={this.submit}>
Ok
</button>
</form>
);
}
}
/////////////////// ROOT
const App = () => <MyForm />;
ReactDOM.render(<App />, document.getElementById("app"));
Also see: Tab Triggers