Рекомендованный способ (и я мог бы добавить, более чистый способ - помещать значения параметров в массив, который вы фиксируете для изменения и изменения при каждом изменении значения). Так что ваш компонент может выглядеть примерно так ...
import React, { Component } from 'react';
import { Form, FormGroup, Input } from 'reactstrap';
const defaultValues = [
{ value: 0, text: 0, key: 1 },
{ value: 500, text: 500, key: 2 },
{ value: 1000, text: 1000, key: 3 },
{ value: 1500, text: 1500, key: 4 },
{ value: 2000, text: 2000, key: 5 }
];
const MIN_TITLE = { selected: true, disabled: true, text: 'Min Price' };
const MAX_TITLE = { selected: true, disabled: true, text: 'Max Price' };
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
minData: [MIN_TITLE, ...defaultValues],
maxData: [MAX_TITLE, ...defaultValues],
minValue: null,
maxValue: null
};
// This allows us to access the state inside the renderoptions function.
// Another way (if you want to ignore this line) is to write the renderOptions
// as renderOptions = data => {}
this.renderOptions = this.renderOptions.bind(this);
}
handleSearch(event) {
alert('Search button clicked');
event.preventDefault();
}
renderOptions(data) {
return data.map(datum => {
// this allows us to indicate whether we are selecting or disabling
const selected = datum.selected || false;
const disabled = datum.disabled || false;
return (
<option key={datum.key} value={datum.value} selected={selected} disabled={disabled}>
{datum.text}
</option>
);
});
}
// Writing your function so does not require the binding in the constructor
handleMinSelect = event => {
const value = event.target.value;
const newMaxValues = [];
defaultValues.forEach(datum => {
// I'm under the impression that reactstrap will change the value to string
if (datum.value >= Number.parseInt(value, 10)) {
newMaxValues.push(datum);
}
});
this.setState({
maxData: [MAX_TITLE, ...newMaxValues],
minValue: value
});
};
handleMaxSelect = event => {
const value = event.target.value;
this.setState({ maxValue: value });
};
render() {
// I'm stri
<div>
<header className="headerbg d-flex">
<div className="container my-auto">
<div className="row">
<div className="offset-1 col-10 offset-lg-0 col-lg-4">
<div id="search-form-div" className="container">
<div className="row">
<div className="col-12 my-4">
<h3>Search</h3>
<Form onSubmit={this.handleSearch}>
<FormGroup>
<Input
type="select"
name="select3"
id="select3"
value={this.state.minValue}
onChange={this.handleMinSelect}>
{this.renderOptions(this.state.minData)}
</Input>
</FormGroup>
<FormGroup>
<Input
type="select"
name="select4"
id="select4"
value={this.state.maxValue}
onChange={this.handleMaxSelect}>
{this.renderOptions(this.state.maxData)}
</Input>
</FormGroup>
<FormGroup>
<Input
type="submit"
name="search"
id="search"
className="btn btn-primary"
value="Search"
/>
</FormGroup>
</Form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>;
}
}
export default MyForm;
В основном, основные изменения
- Установить значения в состоянии и отобразить их, используя
renderOptions
- Когда появляется новое состояние, измените значение и обновите свойство maxData
Надеюсь, это поможет вам 101