輸入時防止textfield換行 - reactjs

我想問一下，當我按下回車鍵後，當我清空文本字段的狀態值時，如何防止光標移到下一行。到目前爲止，我擁有的是當你按下輸入它清除文本字段的值，但光標將進入下一行。這裏是我得到的：輸入時防止textfield換行 - reactjs

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;

來源

2017-06-03 Sydney Loteria

當按下「Enter」鍵時，向文本添加一個新行，這是文本字段的默認行爲。如果你想覆蓋那個行爲，你必須明確地阻止它。你可以用event.preventDefault()來做到這一點。

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

來源

2017-06-03 04:26:19

謝謝兄弟。這工作！ –

我認爲你已經在其他以後運行的2個事件，你可能只需要使用其中的一個或加以處理，妥善。

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

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

兩個事件運行當您點擊「進入」，嘗試檢查與控制檯的日誌，看看是什麼在那裏，如何狀態變化去。

來源

2017-06-03 04:29:08

輸入時防止textfield換行 - reactjs

回答

相關問題