ReactJS onBlur 不工作

Question

我有：

import React from 'react';
import ReactDOM from 'react-dom';

export default class DarkLabel extends React.Component {

    componentWillMount() {
        this.setState({
            editing: false,
            content: this.props.content
        })
    }

    handleEditing(e) {
        this.setState({
            content: e.target.value
        });
        console.log(e.target)
        this.props.edit_callback(e.target.value);
    }

    truncate(limit) {
        var content = '';
        if (this.state.content.length > limit) {
            content = <abbr title={this.state.content}>
                {this.props.right_icon 
                     ? this.state.content.substr(0, (limit - 7)) + '...' 
                     : this.state.content.substr(0, (limit - 2)) + '...'}
            </abbr>
        } else {
            content = this.state.content;
        }
        return content;
    }

    onBlur() {
        alert('test')
        }

    render() {
        var icon = '', content = '', contentRaw = this.state.content;
        var rightIcon = '';
        if (this.props.icon && this.props.icon.indexOf('.png') != -1) {
            icon = <div className="icon"><img src={this.props.icon}/></div>
        }
        else if (this.props.icon) {
            icon = <div className="icon">{this.props.icon}</div>
        }
        if (this.props.right_icon) {
            rightIcon = <div className={'pull-right icon'+(this.props.right_icon_callback ? '' : '')}
                >{this.props.right_icon}</div>
        }

        if (typeof this.state.content !== 'object' && this.state.content.indexOf('.png') != -1) {
            content = <img height="37" src={this.state.content}/>
        } else {
            contentRaw = content;
            if (this.props.classExtra && this.props.classExtra.indexOf('lg') != -1) {
                content = this.truncate(35);
            } else {
                content = this.truncate(17);
            }
        }
        return (
            <div
                className={'pull-left dark-label-wrapper '+this.props.classExtra+(this.props.right_icon_callback ? ' pointer' : '')}
                onClick={(this.props.right_icon_callback ? this.props.right_icon_callback : null)}>
                {icon}
                <div className="content">
                    {this.props.editing ?
                        <input name="labelInput" className="" onBlur={this.onBlur} autoFocus={true} value={this.state.content}
                               onChange={this.handleEditing.bind(this)}/> : content}
                </div>
                {rightIcon}
                {this.props.dropdown}
            </div>
        );
    }
}

onBlur 事件完全没有任何作用，我怎样才能让它工作？我的最终目标是在用户按下回车键或单击输入时让输入“关闭”。

Answer 1

我发现它需要从回调中返回，这就是为什么 alert 不起作用。它实际上工作正常，所以我做到了：

...
onBlur(e) {
        this.setState({
            editing: false
        })
        this.props.edit_callback(e.target.value);
    }
...

我也绑定了onKeyPress：

onKeyPress(e) {
        if(e.key == 'Enter') {
            this.onBlur(e);
        }
    }