在React.js中执行退出

Question

在React.js中执行退出

您如何在React.js中执行退出？

我想揭穿这把手。

我试过debounce(this.handleOnChange, 200)但不管用。

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };}var SearchBox = React.createClass({
  render: function() {
    return <input type="search" name="p" onChange={this.handleOnChange} />;
  },

  handleOnChange: function(event) {
    // make ajax call
  }});

Answer 1

不受控制的部件您可以使用event.persist()方法.下面是一个使用下划线的示例_.debounce():var&nbsp;SearchBox&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;componentWillMount:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.delayedCallback&nbsp;=&nbsp;_.debounce(function&nbsp;(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;`event.target`&nbsp;is&nbsp;accessible&nbsp;now &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000); &nbsp;&nbsp;}, &nbsp;&nbsp;onChange:&nbsp;function&nbsp;(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;event.persist(); &nbsp;&nbsp;&nbsp;&nbsp;this.delayedCallback(event); &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="search"&nbsp;onChange={this.onChange}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}});编辑：见这个JSFiddle受控元件更新：上面的示例显示了不受控制成分..我一直使用受控元素，所以这里是上面的另一个例子，但是没有使用event.persist()“诡计”A&nbsp;提供JSFiddle也是。没有下划线的示例var&nbsp;SearchBox&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;&nbsp;&nbsp;getInitialState:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;query:&nbsp;this.props.query&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;componentWillMount:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.handleSearchDebounced&nbsp;=&nbsp;_.debounce(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.handleSearch.apply(this,&nbsp;[this.state.query]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;500); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;onChange:&nbsp;function&nbsp;(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({query:&nbsp;event.target.value}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.handleSearchDebounced(); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="search" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value={this.state.query} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange={this.onChange}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}});var&nbsp;Search&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;&nbsp;&nbsp;getInitialState:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result:&nbsp;this.props.query&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;handleSearch:&nbsp;function&nbsp;(query)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({result:&nbsp;query}); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="search"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SearchBox&nbsp;query={this.state.result} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleSearch={this.handleSearch}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>You&nbsp;searched&nbsp;for:&nbsp;<strong>{this.state.result}</strong></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}});React.render(<Search&nbsp;query="Initial&nbsp;query"&nbsp;/>,&nbsp;document.body);

Answer 2

如果您需要从事件对象获取DOM输入元素，则解决方案要简单得多-只需使用ref..请注意，这需要下划线:class&nbsp;Item&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.saveTitle&nbsp;=&nbsp;_.throttle(this.saveTitle.bind(this),&nbsp;1000); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;saveTitle(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;val&nbsp;=&nbsp;this.inputTitle.value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;make&nbsp;the&nbsp;ajax&nbsp;call &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<input&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ref={&nbsp;el&nbsp;=>&nbsp;this.inputTitle&nbsp;=&nbsp;el&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="text"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultValue={this.props.title}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange={this.saveTitle}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;}}