我正在学习 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()"
和一个错误“未捕获的类型错误:无法在 ContactList._this2.handleChange 读取 null 的属性‘value’”。
我在 handleChange
函数中使用了 persist
方法。为什么会出现此错误?
最佳答案
事件处理程序最好同步运行。您可以单独处理 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>
);
}
}
关于javascript - 如何在 ReactJS 中使用去抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51177064/