0

我正在尝试在我的 web 应用程序中消除组件的抖动。实际上它是 maxPrice 的过滤器，如果用户开始打印，过滤器开始工作，所有结果都会消失，直到后面有一个合理的数字。

到目前为止我尝试了什么：

import _ from 'lodash'

class MaxPrice extends Component {
  onSet = ({ target: { value }}) => {
    if (isNaN(Number(value))) return;

    this.setState({ value }, () => {
        this.props.updateMaxPrice(value.trim());
    });
  };

  render() {
    const updateMaxPrice = _.debounce(e => {
      this.onSet(e);
    }, 1000);

    return (
      <div>
        <ControlLabel>Preis bis</ControlLabel><br />
        <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
          onChange={updateMaxPrice} value={this.props.maxPrice}
        />
      </div>
    );
  }
}

我收到错误

MaxPrice.js:11 Uncaught TypeError: Cannot read property 'value' of null
at MaxPrice._this.onSet (MaxPrice.js:11)
at MaxPrice.js:21
at invokeFunc (lodash.js:10350)
at trailingEdge (lodash.js:10397)
at timerExpired (lodash.js:10385)

在我的旧版本中，我拥有onChange={this.onSet}并且它有效。

知道可能出了什么问题吗？

4

2 回答 2

3

正如您在评论中提到的，需要以event.persist()异步方式使用事件对象：

https://facebook.github.io/react/docs/events.html

如果您想以异步方式访问事件属性，您应该在事件上调用 event.persist()，这将从池中删除合成事件并允许用户代码保留对事件的引用。

这意味着这样的代码，例如：

onChange={e => {
  e.persist();
  updateMaxPrice(e);
}}
于 2017-05-18T22:10:20.567 回答
0

这是我的最终解决方案。感谢lunochkin！

我不得不引入第二个 redux 变量，以便用户看到他正在输入的值。第二个变量被去抖动，以便 WepApp 等待更新。

class MaxPrice extends Component {

  updateMaxPriceRedux = _.debounce((value) => { // this can also dispatch a redux action
      this.props.updateMaxPrice(value);
  }, 500);

  onSet = ({ target: { value }}) => {
    console.log(value);
    if (isNaN(Number(value))) return;
    this.props.updateInternalMaxPrice(value.trim());
    this.updateMaxPriceRedux(value.trim());
  };

    render() {
        return (
            <div>
                <ControlLabel>Preis bis</ControlLabel><br />
                <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
                             onChange={e => {
                                 e.persist();
                                 this.onSet(e);
                             }} value={this.props.internalMaxPrice}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        maxPrice: state.maxPrice,
        internalMaxPrice: state.internalMaxPrice
    };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators({updateMaxPrice:updateMaxPrice,
        updateInternalMaxPrice:updateInternalMaxPrice}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MaxPrice);
于 2017-05-19T18:47:32.640 回答