javascript - reactjs中的输入过滤

Question

我正在从事电子商务 React/Redux 项目，我想制作用户可以根据价格过滤器显示产品的功能，我制作了两个输入字段，用户可以在其中输入最小和最大价格值，并且可以显示价格范围内的产品， 该功能正在 onChange 工作，但不显示范围之间的产品，它显示一般产品

任何人都可以帮我解决这个问题，在此先感谢，我的代码和屏幕截图附在下面

---

class PriceInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.values,
        };
        this.onValueChangeComplete = this.onValueChangeComplete.bind(this);
    }

    onValueChangeComplete() {
        const { onValueChange } = this.props;

        onValueChange(this.state.value);
    }


    render() {
        const { currencyCode, limits } = this.props;
        const { value } = this.state;
        const notChanged = _.isEqual(value, limits);

        return (
            <div className={styles.wrapper}>
              <div className={styles.inputWrapper}>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                              type="text"
                              name="min"
                              className={styles.textInput}
                              placeholder={formattedValue}
                          />,
                      'filter.price-range-min'
                  )}
                <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                              type="text"
                              name="max"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={this.onValueChangeComplete}
                          />,
                      'filter.price-range-min'
                  )}
              </div>
            </div>
        );
    }
}

我必须在其中使用价格功能的组件

case 'price':
                            childComponent = (
                                <PriceInput values={facet.data}
                                    limits={facet.data}
                                    currencyCode={this.props.currency.code}
                                    onValueChange={(data) => this.onSearchChange(facet.code, data)}/>
                            );
                            break;

Answer 1

这并不是真正的解决方法(我不认为)，但也许它可以让您更接近解决方案。我对您的代码进行了一些编辑，并在我所做的更改处添加了注释。

class PriceInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            // NOTE: I don't know how props.values looks. maybe this is wrong
            min: props.values.min, 
            max: props.values.max
        };
        this.onValueChangeComplete = this.onValueChangeComplete.bind(this);
    }

    onValueChangeComplete(minOrMax, newValue) {
        const { onValueChange } = this.props;
        this.setState(
          {[minOrMax]: newValue}, // update the property "min" or "max" with the new value
          () => onValueChange(this.state) // when the state change is done, send both min and max to onValueChange 
         ); 
       // onValueChange(this.state.value);
    }


    render() {
            // not sure what "limits" are used for
        // maybe you want to use an input with type="number" and 
        // use the attributes "min" and "max" ? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
        const { currencyCode, limits } = this.props;
        const { min, max } = this.state; // this is new. 
        const notChanged = _.isEqual(value, limits);

        return (
            <div className={styles.wrapper}>
              <div className={styles.inputWrapper}>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                                                            value={ min } // this is new
                              type="text"
                              name="min"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={ event => this.onValueChangeComplete('min', event.target.value) } // this was missing before
                          />,
                      'filter.price-range-min'
                  )}
                <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                                value={ max } // this is new
                              type="text"
                              name="max"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={ event => this.onValueChangeComplete('max', event.target.value )}
                          />,
                      'filter.price-range-min'
                  )}
              </div>
            </div>
        );
    }
}