javascript - 在React中反跳onChange事件

在我的SubmitBox组件中，我发现有时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请求。但是有时它可以修复自身并发送值。

如何预防呢？

最佳答案

简短答案

您将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可以保证您的onEvent回调将以与window.event生命周期相匹配的方式被调用。
因此，您可以将event === undefined视为正常的代码路径，当您获得一个值时，您会很幸运地获得计时。

参考文献

[1] Function.prototype.bind

关于javascript - 在React中反跳onChange事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41198870/