在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 SearchBox = React.createClass({

  componentWillMount: function () {
     this.delayedCallback = _.debounce(function (event) {
       // `event.target` is accessible now
     }, 1000);
  },

  onChange: function (event) {
    event.persist();
    this.delayedCallback(event);
  },

  render: function () {
    return (
      <input type="search" onChange={this.onChange} />
    );
  }});

编辑：见这个JSFiddle

---

受控元件

更新：上面的示例显示了不受控制成分..我一直使用受控元素，所以这里是上面的另一个例子，但是没有使用event.persist()“诡计”

A 提供JSFiddle也是。没有下划线的示例

var SearchBox = React.createClass({
    getInitialState: function () {
        return {
            query: this.props.query        };
    },

    componentWillMount: function () {
       this.handleSearchDebounced = _.debounce(function () {
           this.props.handleSearch.apply(this, [this.state.query]);
       }, 500);
    },

    onChange: function (event) {
      this.setState({query: event.target.value});
      this.handleSearchDebounced();
    },

    render: function () {
      return (
        <input type="search"
               value={this.state.query}
               onChange={this.onChange} />
      );
    }});var Search = React.createClass({
    getInitialState: function () {
        return {
            result: this.props.query        };
    },

    handleSearch: function (query) {
        this.setState({result: query});
    },

    render: function () {
      return (
        <div id="search">
          <SearchBox query={this.state.result}
                     handleSearch={this.handleSearch} />
          <p>You searched for: <strong>{this.state.result}</strong></p>
        </div>
      );
    }});React.render(<Search query="Initial query" />, document.body);

Answer 2

如果您需要从事件对象获取DOM输入元素，则解决方案要简单得多-只需使用ref..请注意，这需要下划线:

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.saveTitle = _.throttle(this.saveTitle.bind(this), 1000);
    }
    saveTitle(){
        let val = this.inputTitle.value;
        // make the ajax call
    }
    render() {
        return <input 
                    ref={ el => this.inputTitle = el } 
                    type="text" 
                    defaultValue={this.props.title} 
                    onChange={this.saveTitle} />
    }}