Javascript reactjs中的输入过滤

我正在从事电子商务React/Redux项目，我想让用户能够根据价格过滤器显示产品，我已经创建了两个输入字段，用户可以在其中键入最小和最大价格值，并可以显示介于价格范围之间的产品， 该功能在更改时起作用，但不显示范围内的产品，而是显示一般产品

谁能帮我整理这个问题，提前谢谢，我的代码和截图附在下面

---

类PriceInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
价值：道具价值观，
};
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=u.isEqual（值、限制）；
返回(
{I18n.getComponent(
（formattedValue）=>
,
'过滤器。价格范围最小'
)}
{I18n.getText（'filter.price aed'，{}，'To'）}
{I18n.getComponent(
（formattedValue）=>
,
'过滤器。价格范围最小'
)}
);
}
}

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

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

案例“价格”：
子组件=(
this.onSearchChange（facet.code，data）}/>
);
打破

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

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

类PriceInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
//注意：我不知道props.values看起来怎么样。也许这是错的
min:props.values.min，
max:props.values.max
};
this.onValueChangeComplete=this.onValueChangeComplete.bind（this）；
}
onValueChangeComplete（minOrMax、newValue）{
const{onValueChange}=this.props；
这是我的国家(
{[minOrMax]：newValue}，//用新值更新属性“min”或“max”
（）=>onValueChange（this.state）//状态更改完成后，将min和max发送到onValueChange
); 
//onValueChange（this.state.value）；
}
render（）{
//不确定“限制”用于什么
//也许您想使用type=“number”和
//使用属性“最小”和“最大”？https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
const{currencyCode，limits}=this.props；
const{min，max}=this.state；//这是新的。
const notChanged=u.isEqual（值、限制）；
返回(
{I18n.getComponent(
（formattedValue）=>
this.onValueChangeComplete（'min'，event.target.value）}//以前缺少此项
/>,
'过滤器。价格范围最小'
)}
{I18n.getText（'filter.price aed'，{}，'To'）}
{I18n.getComponent(
（formattedValue）=>
this.onValueChangeComplete（'max'，event.target.value）}
/>,
'过滤器。价格范围最小'
)}
);
}
}

有些东西看起来不对劲。也许我误解了什么。。您的

min

输入似乎没有

onChange

功能。而且您似乎没有在输入中使用

this.state.value

作为值。

props.values

看起来像什么？它是一个对象吗？你能帮助我如何根据你的知识重构代码@jonahey@jonahe，代码运行良好，但问题是，当我输入min值（第一次输入）时，页面就开始过滤产品，我想在用户在最小值之后键入最大值时实现过滤，如果用户开始设置最大值，然后设置最小值，会发生什么情况？我认为这可能会让用户感到困惑。如果您需要限制过滤发生的时间，那么可能会使用一个额外的按钮“应用”或其他东西来触发

onValueChange（this.state）对不起，对前面的评论做了很多编辑。现在完成。我添加了屏幕截图，希望你能理解功能是什么，好的，是的，这很有意义。我对onValueChangeComplete做了一个小小的更改，这可能就足够了。
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>
        );
    }
}