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}
                          />,
                      '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

它会是这样的：

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

反应中的价格过滤

1 个答案: