在React中反跳onChange事件

Question

在我的ModifyBox組件中，我發現有時event.target.value變得不確定，並且無法找到解決方法。

import React from 'react';
import $ from 'jquery';

let debounce = require('lodash.debounce');
let uniqueKey = 0;
let jqxhr = {
    abort: () => {
    }
};

export default class SuggestBox extends React.Component {
    constructor(props) {
        super(props);
        this.doneTyping = debounce(this.doneTyping.bind(this), this.props.delay);
        this.state = {
            hidden: true,
            data: []
        }
    }

    render() {
        const hidden = this.state.hidden ? {display: 'none'} : {display: 'block'};

        return (
            <div className="ReactSuggestion-Wrapper">
                <input
                    type="text"
                    onChange={this.onChange.bind(this, event)}
                    onFocus={this.showSuggestBox.bind(this, event)}
                    onBlur={this.hideSuggestBox.bind(this, event)}
                />
                <div style={hidden} className="ReactSuggestion-SuggestionBox">
                    {this.state.data.map((item) => {
                        return (
                            <ul key={uniqueKey++} className="ReactSuggestion-SuggestionList">
                                <li className="ReactSuggestion-SuggestionHeader">
                                    <p>
                                        {item.header.title}
                                    </p>
                                </li>
                                {item.data.map((data, dataKey) => {
                                    return (
                                        <li key={dataKey} className="ReactSuggestion-SuggestionItems">
                                            <a className="ReactSuggestion-Data">
                                                <div className="ReactSuggestion-Data__Thumbnail">
                                                    <img src={data.image} className="ReactSuggestion-Data__ThumbnailImage"/>
                                                </div>
                                                <div className="ReactSuggestion-Data__Details">
                                                    <p className="ReactSuggestion-Data__DetailsPrimary">
                                                        {data.primary}
                                                    </p>
                                                    <p className="ReactSuggestipn-Data__DetailsSecondary">
                                                        {data.secondary}
                                                    </p>
                                                </div>
                                            </a>
                                        </li>
                                    )
                                })}
                            </ul>
                        );
                    })}
                </div>
            </div>
        )
    }

    showSuggestBox(event) {
        if (event.target.value == '') {
            return false;
        }
        if (this.state.oldValue == event.target.value) {
            this.setState({
                hidden: false
            })
        }
    }

    hideSuggestBox(event) {
        this.setState({
            hidden: true,
            oldValue: this.state.value
        })
    }

    onChange(event) {
        this.setState({
            value: event.target.value
        })
        this.doneTyping()
    }

    doneTyping() {
        const self = this;
        jqxhr = $.ajax({
            url: this.props.url,
            data: {q: this.state.value},
            type: this.props.method,
            dataType: 'JSON',
            success: relay => {
                let empty = false;
                relay.forEach(item => {
                    empty = item.data.length > 0 ? false : true;
                })
                if (empty)
                    return false;

                self.setState({
                    data: relay,
                    hidden: false
                })
            }
        })
    }
}

SuggestBox.propTypes = {
    url: React.PropTypes.string,
    method: React.PropTypes.string,
    delay: React.PropTypes.number
}

如您在我的構造函數中看到的

this.doneTyping = debounce(this.doneTyping.bind(this), this.props.delay);

阻止事件池進行反應的代碼使反應服從去抖動，但是在我的ajax請求中，我的event.target.value或this.state.value變得不確定，並且我無法發送ajax請求。 但是有時它可以修復自身並發送值。

如何預防呢？

Answer 1

簡短答案

您將window.event綁定為事件處理程序的第一個參數。 在這里將fn.bind(this, event)更改為fn.bind(this) ：

<input
    type="text"
    onChange={this.onChange.bind(this, event)}
    onFocus={this.showSuggestBox.bind(this, event)}
    onBlur={this.hideSuggestBox.bind(this, event)}
/>

說明

當您執行fn.bind(this, arg1, arg2) ，您正確地綁定了this上下文，但是您還指定了額外的參數，這些參數將在調用函數時添加到參數列表中。

更具體地講，如果你這樣做showSuggestionBox.bind(this) ，那么this將是你SuggestionBox實例，你的論點看起來像：

showSuggestionBox(reactEvent)

但是，如果您執行showSuggestionBox.bind(this, event) （如上面的內容），那么您的函數將像這樣被調用：

showSuggestionBox(window.event, reactEvent)

因此，您關心的React事件將由window.event代替。 我只是在猜測，但是我不認為React保證將以與window.event生命周期相匹配的方式調用onEvent回調。 因此，您可以將event === undefined視為正常的代碼路徑，並且當您獲得一個值時，只是在時間上很幸運。

參考文獻

[1] Function.prototype.bind