React中的缓冲输入

Question

在ReactJS中执行缓冲输入的正确方法是什么？

也就是说，您有一个过滤器可以缩小（例如）一个元素，但在等待最后一个用户输入之后为n毫秒前。

这里，你可以粘贴到的jsfiddle例如一个例子（它似乎有在未注册用户没有 “分享” 功能？）：

HTML：

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> 

<div id="container"></div> 

的JavaScript：

class Form extends React.Component { 
    render() { 
    return (
     <div> 
     <Filter /> 
     <Options /> 
     </div> 
    ); 
    } 
} 

class Filter extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this); 
    } 

    handleInputChange(event) { 
    const target = event.target; 
    const value = target.value === 'checkbox' ? target.checked : target.value; 
    // Buffer user input somehow, so that if you write "test" 
    // this would only log the value "test", instead of cumulatively: 
    // t 
    // te 
    // tes 
    // test 

    // If I use setTimeout(), it simply makes the cumulative input take effect with a delay, but still "t", "te", "tes", "test" instead of just "test" 
    console.log(value); 

    // This is the use case: 
    let elementsToHide = document.querySelectorAll("li:not([name*=" + value + "])"); 
    Object.keys(elementsToHide).map(function(el) { 
     elementsToHide[el].style.visibility = "hidden"; 
    }); 
    } 

    render() { 
    return (
     <input type="text" onChange={this.handleInputChange} /> 
    ); 
    } 
} 

class Options extends React.Component { 
    render() { 
    let examples = ["this", "is", "spartacus"]; 
    return (
     <ul> 
     { 
      examples.map(function(item) { 
      return <li key={item} name={item}>{item}</li> 
      }) 
     } 
     </ul> 
    ); 
    } 
} 

ReactDOM.render(
    <Form />, 
    document.getElementById('container') 
); 

就像我在上面的评论中提到的那样，输入是累积的。所以，如果我写test那么它的作用是：

t 
te 
tes 
test 

但我想发生是先缓冲，然后只发送（如1000毫秒）：

test

使用setTimeout()只是延缓当累积数据发送

t # appears after timeout 
te # appears after timeout 
tes # appears after timeout 
test # appears after timeout 

Answer 1

您可以使用反跳从lodash

constructor(props) { 
    super(props); 
    this.handleInputChange= _.debounce(this.handleInputChange, n); // where n is the numnber of milliseconds you want to wait 
} 

handleInputChange = (event) => { 
    const target = event.target; 
    const value = target.value === 'checkbox' ? target.checked : target.value; 



    // This is the use case: 
    let elementsToHide = document.querySelectorAll("li:not([name*=" + value + "])"); 
    Object.keys(elementsToHide).map(function(el) { 
     elementsToHide[el].style.visibility = "hidden"; 
    }); 
    }