最低价格和最高价格以reactjs形式进行验证

Question

I am creating a React Js website. Where I have a form with 2 select fields Min price and Max price. I want to apply validation on these two fields. So if user click minimum price of500 the maximum should only display 500 going up. My react component code is available below.

import React, { Component } from 'react';
import { Form, FormGroup, Input } from 'reactstrap';

class MyForm extends Component {
constructor(props) {
    super(props);

    this.state = {
   };

}

handleSearch(event) {
    alert("Search button clicked");
    event.preventDefault();

}

render() {

    return (
        <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">
                                                    <option selected disabled>Min Price</option>
                                                    <option value="0">0</option>
                                                    <option value="500">500</option>
                                                    <option value="1000">1000</option>
                                                    <option value="1500">1500</option>
                                                    <option value="2000">2000</option>
                                                </Input>
                                            </FormGroup>
                                            <FormGroup>
                                                <Input type="select" name="select4" id="select4">
                                                    <option selected disabled>Max Price</option>
                                                    <option value="0">0</option>
                                                    <option value="500">500</option>
                                                    <option value="1000">1000</option>
                                                    <option value="1500">1500</option>
                                                    <option value="2000">2000</option>
                                                </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;

Hope you understand my code. Thanks in advance.

Answer 1

you need to add an onChange function to your Inputs. Then update the state when the minValue input is selected. When this is the max, compare the selected value with the minValue in the state and reject it when less than the

I would do another logic if had to do this kind of form anyway. I would create the option list for maxValue dynamicaly based on the choice for minValue. I would display only the values greater than the min. I guess this is more convenient for user.

Answer 2

The recommended way (and might I add, the cleaner way, is to place to option values in an array, which you commit to state and change whenever a value is changed). So your component might look something like this...

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;

Basically, the major changes are

• Set the values in state and render them using the renderOptions
• When a new state pops up, change the value and update the maxData property

Hope it helps you out 😉