Javascript reactjs中的价格过滤

我正在从事电子商务React/Redux项目，我想制作一个功能，用户可以根据价格滑块显示产品，我制作了两个输入字段，用户可以在其中键入最小和最大价格值，该功能在按钮单击上工作，但我想更改事件，作为用户类型的第二个值，它会过滤productonChange

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

---

类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）}/>
);
打破

---

会是这样的：

handleMaxChange(event) {
  const minValue = '' // I'm assuming you already have max's value saved somewhere
  const { value } = event.target

  if (minValue && value) {
    this.props.onValueChange(/* send values here */)
  }
}

render() {
  return (
    ...
    <input
      type="text"
      name="max"
      className={styles.textInput}
      placeholder={formattedValue}
      onChange=={handleMaxChange}
    />
  )
}

handleMaxChange（事件）{
const minValue=''//我假设您已经在某个地方保存了max的值
常量{value}=event.target
if（最小值和最小值）{
this.props.onValueChange（/*在此处发送值*/）
}
}
render（）{
返回(
...
)
}

在第二个

input

元素中，设置

onChange

并检查两个输入是否已经设置了值。如果为真，手动触发按钮点击事件。您能告诉我，如何使用onChange event@Hemerson请不要破坏您的帖子。minValue由用户设置，有两个输入框，一个用于min price，一个用于max price，产品将显示哪个位于min和max Values，只需对两个输入进行相同的操作。

handleMaxChange(event) {
  const minValue = '' // I'm assuming you already have max's value saved somewhere
  const { value } = event.target

  if (minValue && value) {
    this.props.onValueChange(/* send values here */)
  }
}

render() {
  return (
    ...
    <input
      type="text"
      name="max"
      className={styles.textInput}
      placeholder={formattedValue}
      onChange=={handleMaxChange}
    />
  )
}