I have 2 inputs with minimum and maximun number range, and I'm trying to use if statement so if user puts in the minimun input value that is higher from the maximun input, it will reset the input to be equal to the maximum. Why it's not working in the function minRangeInputChange?
class Generator extends React.Component {
constructor (props) {
super(props)
this.state = {
onView: '0',
minNum: 0 ,
maxNum: 100
}
}
btnClick = () => {
const { minNum, maxNum } = this.state;
const min = Math.ceil(minNum);
const max = Math.floor(maxNum);
const x = Math.floor(Math.random() * (max - min + 1)) + min;
return this.setState({ onView : x });
}
minRangeInputChange = (event) => {
const { minNum, maxNum } = this.state;
if (minNum > maxNum) {
return this.setState({ minNum: maxNum });
} else {
return this.setState({ minNum: event.target.value });
console.log(minNum);
}
}
maxRangeInputChange = (event) => {
const { maxNum } = this.state;
this.setState({ maxNum: event.target.value });
}
render() {
return (
<div className="container">
<Instructions />
<Range
max={this.state.maxNum}
min={this.state.minNum}
minChange={this.minRangeInputChange}
maxChange={this.maxRangeInputChange}
/>
<Generate currentClick={this.btnClick} />
<View show={this.state.onView} />
</div>
);
}
}
export default Generator;
The Range Component:
class Range extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="range">
<h3>Minimum</h3>
<input
type="number"
value={this.props.minNum}
onChange={this.props.minChange}
required
/>
<h3>Maximum</h3>
<input
type="number"
value={this.props.maxNum}
onChange={this.props.maxChange}
required
/>
</div>
);
}
}
export default Range;
Aucun commentaire:
Enregistrer un commentaire