首頁猿問在React.js中執(zhí)行退出

在React.js中執(zhí)行退出

JavaScript React.JS

慕慕森 2019-07-04 18:29:30

在React.js中執(zhí)行退出您如何在React.js中執(zhí)行退出？我想揭穿這把手。我試過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 }});

查看完整描述

3 回答

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

不受控制的部件

您可以使用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);

反對回復 2019-07-04

心有法竹

TA貢獻1866條經驗獲得超5個贊

如果您需要從事件對象獲取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} />
    }}

反對回復 2019-07-04