reactjs中的输入过滤

Posted 2023-02-27

【中文标题】reactjs中的输入过滤

【英文标题】：input filtering in reactjs

【发布时间】：2018-02-16 18:20:58

【问题描述】：

我正在从事电子商务 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;

【问题讨论】：

有些东西看起来不对劲。也许我误解了一些东西。您的min 输入似乎没有onChange 功能。而且您似乎没有在输入中使用this.state.value 作为值。 props.values 是什么样的？它是一个对象吗？

你能帮我根据你的知识重构代码吗@jonahe

【参考方案1】：

这并不是真正的解决方案（我不认为），但也许它可以让您更接近解决方案。我对您的代码进行了一些编辑，并在我进行更改的地方放置了 cmets。

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>
        );
    

【讨论】：

嘿@jonahe，代码工作正常，但问题是，页面开始过滤产品，我在 min(first input) 中输入值，我想在用户输入最大值后实现过滤最小值

如果用户开始设置最大值，然后设置最小值会发生什么？我认为这可能会让用户感到困惑。如果您需要限制过滤应该发生的时间，那么也许可以使用额外的按钮“应用”或其他东西来触发onValueChange(this.state);

抱歉，对之前的评论做了很多修改。现在完成。

我已经添加了截图，希望你能理解它的功能，

好的，是的，这是有道理的。我对onValueChangeComplete 做了一个小改动，可能就足够了。