Question

我正在学习ReactJS并遇到以下问题。我有一个用于联系人搜索的输入，想在用户停止输入后的1000毫秒内处理它。为此，我使用了反跳功能：

import React, { Component}  from 'react';
import ReactDOM  from 'react-dom';
import './index.css';
import {debounce} from 'lodash';

const contacts = [
    {
        id: 1,
        name: 'Darth Vader',
        phoneNumber: '+250966666666',
        image: 'img/darth.gif'
    }, {
        id: 2,
        name: 'Princess Leia',
        phoneNumber: '+250966344466',
        image: 'img/leia.gif'
    }, {
        id: 3,
        name: 'Luke Skywalker',
        phoneNumber: '+250976654433',
        image: 'img/luke.gif'
    }, {
        id: 4,
        name: 'Chewbacca',
        phoneNumber: '+250456784935',
        image: 'img/chewbacca.gif'
    }
];

class Contact extends React.Component {
    render() {
        return (
            <li className="contact">
                <img className="contact-image" src={this.props.image} width="60px" height="60px"/>
                <div className="contact-info">
                    <div className="contact-name">{this.props.name}</div>
                    <div className="contact-number">{this.props.phoneNumber}</div>
                </div>
            </li>
        );
    }
}

class ContactList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayedContacts: contacts,
        };
        this.handleChange = debounce(this.handleChange.bind(this), 1000);
    }

    handleChange = e => {
        e.persist();
        let input = e.target.value.toLowerCase();
        this.setState({
            displayedContacts: contacts.filter(c => c.name.toLowerCase().includes(input))
        });   
    }

    render() {
        return (
            <div className="contacts">
                <input type="text" className="search-field" onChange={this.handleChange}/>
                <ul className="contacts-list">
                    {
                        this.state.displayedContacts.map(c =>
                            <Contact 
                                key={c.id} 
                                name={c.name}
                                phoneNumber={c.phoneNumber}
                                image={c.image} />
                        )
                    }
                </ul>
            </div>
        );
    }
}

ReactDOM.render(
    <ContactList />,
    document.getElementById('root')
);

在输入搜索输入后，在控制台日志中，我得到一个警告：“出于性能原因，此综合事件已被重用。如果您看到此情况，在已发布/无效的综合事件中访问属性target。此属性设置为null。如果必须保留原始综合事件，请使用event.persist（）“

和错误 “未捕获的TypeError：无法在ContactList._this2.handleChange上读取null的属性'value'”。

我在persist函数中使用handleChange方法。为什么会出现此错误？

Answer 1

事件处理程序最好同步运行。您可以单独处理value，并使用单独的反跳功能过滤联系人。

示例

class ContactList extends React.Component {
  state = {
    contacts,
    displayedContacts: contacts
  };

  setDisplayedContacts = debounce(query => {
    this.setState({
      displayedContacts: this.state.contacts.filter(c =>
        c.name.toLowerCase().includes(query)
      )
    });
  }, 1000);

  handleChange = e => {
    let input = e.target.value.toLowerCase();
    this.setDisplayedContacts(input);
  };

  render() {
    return (
      <div className="contacts">
        <input
          type="text"
          className="search-field"
          onChange={this.handleChange}
        />
        <ul className="contacts-list">
          {this.state.displayedContacts.map(c => (
            <Contact
              key={c.id}
              name={c.name}
              phoneNumber={c.phoneNumber}
              image={c.image}
            />
          ))}
        </ul>
      </div>
    );
  }
}

如何在ReactJS中使用去抖动

1 个答案: