Enterを押したときにテキストフィールドの改行を防止する

Question

Enterキーを押した後にテキストフィールドの状態値を空にすると、次の行にカーソルが移動しないようにするにはどうしたらいいですか？これまで私が持っているものは、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

は、キーが押されている「と入力し、」テキストに新しい行を追加し、テキストフィールドのデフォルトの動作です。その振る舞いを上書きしたい場合は、明示的にそのことを防ぐ必要があります。 event.preventDefault()でそれを行うことができます。

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

Answer 2

私は、あなたはおそらく唯一のそれらのを使用するか、適切にそれを処理しようとする必要があります 、あなたが他の後に実行しているこれらの2つのイベントだと思います。

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

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

「入力」をクリックしたときに両方のイベントが実行された場合は、コンソールログでその状態を確認し、状態がどのように変化するかを確認してください。