.increment_input{
width:30px;
text-align:center;
}
.increment_input_tip{
display:none;
}
.increment_input:hover+.increment_input_tip{
display:inline-flex;
color:lightgreen;
}
</style>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<br />
<div id="root3">
</div>
<script type="text/babel">
class Fabonacci extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{ value: 1 }, { value: 1 }],
current_step: 1,
};
}
handleClick_retrieveStep(step_num) {
const h = this.state.history.slice(0, step_num);
this.setState(
{
history: h,
current_step: step_num,
}
);
}
handleClick_showStepvalue(step_num){
this.setState({current_step:step_num});
}
handleClick_nextStep() {
const history_length = this.state.history.length;
const h = this.state.history.slice(0, history_length);
const current_value = h[history_length - 1].value;
const previous_value = (history_length === 1) ? 0 : h[history_length - 2].value;
const future_value = current_value + previous_value;
this.setState(
{
history: h.concat({ value: future_value }),
current_step: history_length + 1,
}
);
}
handleClick_imcrement() {
this.setState(
(prevState, props) => {
const value1 = prevState.history[0].value + props.increment;
const value2 = prevState.history[1].value + props.increment;
const h = prevState.history.slice(0, 2);
h[0].value = value1;
h[1].value = value2;
return (
{
history: h,
current_step: 1,
}
);
}
);
}
render() {
const current_step = this.state.current_step;
const current_stepValue = this.state.history[current_step - 1].value;
const button_array = this.state.history.map(
(item, index) => {
const button_step = index + 1;
const button_description = "retrieve step " + button_step;
const button_description2 = "show step " +button_step+" value";
return (
<li key={button_step}>
<button onClick={() => this.handleClick_retrieveStep(button_step)}>
{button_description}</button>
<span> </span>
<button onClick={() => this.handleClick_showStepvalue(button_step)}>
{button_description2}</button>
</li>
);
}
);
const all_history_values = this.state.history.map(
(item, index) => {
return (
<span key={index}>{item.value} </span>
);
}
);
return (
<div>
<p>
all history values: ( {all_history_values} )</p>
<p>
value at step {current_step} is {current_stepValue} </p>
<button onClick={() => this.handleClick_imcrement()}>increase x1,x2 by {this.props.increment}</button>
<span> </span>
<button onClick={() => this.handleClick_nextStep()}>increase 1 step >></button>
<ol>{button_array}</ol>
</div>
);
}
}
class App3 extends React.Component {
constructor(props) {
super(props);
this.state={increment:1}
}
handleKeydown(e){
if(e.keyCode===13){
this.setState({increment: parseInt(e.target.value)});
}
}
render() {
return (
<div>
<p>
formular x(n-1) + x(n) = x(n+1) where x1, x2 initial value = 1</p>
<span>increase x1, x2 by </span>
<input className="increment_input" type="number" defaultValue={1} onKeyDown={(e)=>this.handleKeydown(e)}></input>
<span className="increment_input_tip">press enter to save, check change on increase x1,x2 button</span>
<Fabonacci increment={this.state.increment} />
</div>
);
}
}
ReactDOM.render(
<App3 />,
document.getElementById('root3')
);
</script>
No comments:
Post a Comment