javascript - 检测 'Enter' 的按键会阻止输入文本字段上的任何数据输入

Question

React 初学者，我遇到了一个问题。我有一个个人资料页面，用户可以在其中更改每个字段(名字、电子邮件等)，一旦按下“Enter”，它就会保存该特定字段(redux/axios/promise)。

我遇到的问题是，当我使用 onKeyPress/Down/Up 作为事件触发器时，它会阻止任何数据输入。意思是，我无法在字段中输入任何内容，就好像它是只读的或被阻止的一样。如果我使用 onChange，它就可以工作。

class Account extends Component {

    constructor( props ) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {

        if( e.key == 'Enter' ) { // this is detected (i console.logged it)

            e.preventDefault(); // also tried without these
            e.stopPropagation(); // also tried without these

            // this is triggered but the text field doesn't change so it updates nothing
            this.props.setUserKvPair( e.target.name, e.target.value );
        }
    }

    render() {

        return (
            <div className="app-account row">

                <div className="component-container col-12">
                    <div className="inner">

                        <p className="form-group">
                            <label className="form-text text-muted">Email Address</label>
                            <input 
                                type="text" 
                                name="email"
                                className="form-control" 
                                value={this.props.user.email} 
                                onKeyDown={this.handleChange} />
                        </p>
                        <p className="form-group">
                            <label className="form-text text-muted">First Name</label>
                            <input 
                                type="text" 
                                name="first_name"
                                className="form-control" 
                                value={this.props.user.first_name} 
                                onKeyPress={this.handleChange} />
                        </p>
                    </div>
                </div>

            </div>
        );
    }

}

const mapStateToProps = ( state ) => {
    return {
        user: state.user.data,
        properties: state.properties.data,
    }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(userActions, dispatch);
}


export default connect( mapStateToProps, mapDispatchToProps )(Account);

基本上，一切正常，但只是文本输入的值不会改变，除非我使用 onChange。

如何消除现场的阻塞/只读？

Answer 1

我建议为此使用表单，因为它提供免费的 onEnter 功能，而无需连接一堆不同的事件处理程序。另外，我建议使用Controlled Components它确实使用了 onChange 处理程序，但缓存了组件状态中的所有输入值。这使得数据的使用变得极其容易。

请参阅下面的代码示例

import React, { Component } from "react";

class SomeComponent extends Component {
    constructor() {
        super();

        this.state = {
            text_1: "",
            text_2: ""
        };

        this.submitHandler = this.submitHandler.bind(this);
    }

    submitHandler(e) {
        e.preventDefault();

        const { text_1, text_2 } = this.state;

        console.log(text_1, text_2);
    }

    render() {
        return (
            // Using a form gives free on 'Enter' functionality
            <form onSubmit={this.submitHandler}>
                {/* Controlled Component 1 */}
                <input
                    type="text"
                    value={this.state.text_1}
                    onChange={e => this.setState({ text_1: e.target.value })}
                />

                {/* Controlled Component 2 */}
                <input
                    type="text"
                    value={this.state.text_2}
                    onChange={e => this.setState({ text_2: e.target.value })}
                />
            </form>
        );
    }
}