输入密钥后清除文本区域

Question

输入密钥按下后，我想清除textarea内容。但是，当输入键按下文本区域清除，但输入键仍然（新行）。我怎样才能解决这个问题？

constructor(){ 
    this.state = { text : '' } 
} 

keypress(e){ 
    if(e.key == 'Enter'){ 
     this.setState({ 
     send_message: '' 
     }) 
    } 
} 

<textarea value={this.state.text} placeholder="Text" rows="1" className="form-textarea typing-area" onKeyPress={this.keypress.bind(this)}></textarea> 

Answer 1

您可以使用event.preventDefault时，关键是 '回车'：

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { text : '' } 
 
    this.handleChange = this.handleChange.bind(this); 
 
    this.keypress = this.keypress.bind(this); 
 
    } 
 
    
 
    handleChange(event) { 
 
    this.setState({text: event.target.value}); 
 
    } 
 
    
 
    keypress(e){ 
 
    if(e.key === 'Enter'){ 
 
     e.preventDefault(); 
 
     this.setState({ 
 
     send_message: this.state.text, 
 
     text: '', 
 
     }); 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <textarea 
 
      value={this.state.text} 
 
      placeholder="Text" 
 
      rows="1" 
 
      className="form-textarea typing-area" 
 
      onChange={this.handleChange} 
 
      onKeyPress={this.keypress} 
 
     /> 
 
     <pre>{JSON.stringify(this.state, null, 2)}</pre> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>