javascript - 在 React 中消除 onChange 事件

Question

在我的 SuggestBox 组件中，我发现有时 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);

代码阻止 react 中的事件池，因此 react 遵循反跳，但在我的ajax请求中，我的event.target.value或this.state.value变得未定义，我无法发送ajax请求。但有时它可以自行修复并发送值。

如何防止这种情况发生？

Answer 1

简短回答

您正在绑定(bind)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)时，您正确地绑定(bind)了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