Question

我有一个简单的交互式应用程序，并且我想基于用户搜索来呈现CardList组件。问题是我想为用户搜索设置setTimeOut，并在用户停止键入后的2000ms之后执行该功能。

这是代码，正如您所看到的，我设法完成了它，但是它很hacky并没有真正的用处，很肯定有更好的方法可以做到这一点。我现在正在做的是始终根据用户输入更改this.state.robots的位置。注意searchBox组件有一个输入字段

class App extends Component {

    constructor(){
        super();
        this.state = {
            robots: robots,
            searchField: ''
        }
    }

    onSearchange = (event) =>{ 
        let timeOut = null;
        this.setState({searchField: event.target.value,robots:robots});

        event.target.onkeyup = (e) =>{
            clearTimeout(timeOut);
            timeOut = setTimeout(()=> {
                const  filterRobots = this.state.robots.filter(robot => {
                    return robot.name.toLowerCase().includes(this.state.searchField.toLowerCase());
                })
                this.setState({robots: filterRobots});
            },2000);

        }
    }

    render() {
        return (
            <div className = "tc">
                <h1>RoboFriend</h1>
                <SearchBox searchChange = {this.onSearchange}/> 
                <CardList robots = {this.state.robots} />
            </div>

        );
    }
}

我希望能够将fillterRobots数组动态发送到CardList组件，以便我可以正确呈现结果

Answer 1

我会使用lodash的debounce()之类的东西。您不仅想要延迟，而且还想取消以前的延迟函数执行，如果在执行当前延迟函数之前收到一个新事件。

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.delayedCallback = _.debounce(this.handleChange, 1000);
  }

  handleChange(value) {
    this.setState({ value });
  }

  onChange(event) {
    event.persist();
    this.delayedCallback(event.target.value);
  }

  render() {
    return (
      <div>
        <input onChange={this.onChange.bind(this)} />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

如何通过用户键入和超时Reactjs正确处理状态

1 个答案: