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

Question

我正在创建一个React Js网站。 在这里，我有一个带有2个选择字段的最低价格和最高价格的表格。 我想在这两个字段上应用验证。 因此，如果用户单击最低价格500，则最高价格应仅显示500上涨。 我的react组件代码在下面可用。

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;

希望你理解我的代码。 提前致谢。

Answer 1

您需要在输入中添加onChange函数。 然后在选择minValue输入时更新状态。 如果这是最大值，则将所选值与状态中的minValue进行比较，如果小于该值，则将其拒绝

如果还是要进行这种形式的话，我会做另一种逻辑。 我将基于对minValue的选择动态地为maxValue创建选项列表。 我只会显示大于最小值的值。 我想这对用户来说更方便。

Answer 2

推荐的方法（或者我可能会添加一种更简洁的方法是将选项值放置在数组中，您要声明该状态并在更改值时进行更改）。 因此您的组件可能看起来像这样...

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属性

希望它对您有帮助