проверка минимальной и максимальной цены в форме реагирования

вам нужно добавить функцию onChange к вашим входам. Затем обновите состояние, когда выбран вход minValue. Когда это максимум, сравните выбранное значение с minValue в состоянии и отклоните его, когда значение меньше, чем

. Я бы сделал другую логику, если бы все равно пришлось делать такую ​​форму. Я бы создал список опций для maxValue динамически на основе выбора для minValue. Я бы отображал только значения больше мин. Я думаю, это удобнее для пользователя.

Рекомендованный способ (и я мог бы добавить, более чистый способ - помещать значения параметров в массив, который вы фиксируете для изменения и изменения при каждом изменении значения). Так что ваш компонент может выглядеть примерно так ...

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

Надеюсь, оно поможет вам