Question

我想问一下，当我按下回车后清空文本字段的状态值时，如何阻止光标进入下一行。到目前为止我所拥有的是当你按Enter键时它会清除文本字段的值，但光标将转到下一行。这就是我所拥有的：

import React, { Component } from 'react';
import Textfield from 'react-mdl/lib/Textfield';
import "./style.css";

class ChatMessageBox extends Component {
    constructor(props){
        super(props);
        this.state = {
            messageBox: ''
        };
    }
    handleMessageBox(event){
        if(event.key === "Enter"){
            this.setState({
                messageBox: ''
            });

        }
    }
    handleMessageBoxOnChange(event){
        this.setState({
            messageBox: event.target.value
        });
    }
    render(){
        return (
            <div className="chat-message-box">
                <Textfield
                    onKeyPress={(e) => { this.handleMessageBox(e) }}
                    onChange={ (e) => { this.handleMessageBoxOnChange(e) }}
                    value={this.state.messageBox}
                    label="Type a message"
                    rows={4}
                />
            </div>
        );
    }
}

export default ChatMessageBox;

Answer 1

按下“Enter”键时向文本添加新行是文本字段的默认行为。如果要覆盖该行为，则必须明确地防止这种情况。您可以使用event.preventDefault()。

执行此操作

handleMessageBox(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    this.setState({
      messageBox: ""
    });
  }
}

Answer 2

我认为你在另一个之后运行的那两个事件，您可能只需要使用其中一个或尝试正确处理它。

 onKeyPress={(e) => { this.handleMessageBox(e) }}

 onChange={ (e) => { this.handleMessageBoxOnChange(e) }}

当您单击“输入”时，两个事件都会运行，尝试使用控制台日志检查这些事件以查看其中发生的情况以及状态如何更改。

输入时会阻止文本字段换行 - reactjs

2 个答案: