ステートレスコンポーネントのReactでEnterキーを押してテキストエリアをクリアする

Question

私はReactでチャットコンポーネントを構築していますが、Enterキーを押した後にtextarea要素をクリアする方法を理解できません。コンポーネントはステートレスなので、テキストエリアに関連付けられている小道具がないため、レンダリングされることはありません。

sendMessage(e) { 
    if (e.key === 'Enter') { 
    this.props.onKeyUp(e.target.value) 
    // I want to clear the textarea around here 
    } 
} 

render() { 
    return(
    ... 
    <textarea onKeyUp={this.sendMessage}></textarea> 
    ... 

Answer 1

ちょうど価値を持つあなたの仕事の後targetのvalueをクリア。

e.target.value = ""; 

例：

class Test extends React.Component { 
 
    sendMessage(e) { 
 
    if (e.key === 'Enter') { 
 
     //this.props.onKeyUp(e.target.value) your work with value 
 
     // I want to clear the textarea around here 
 
     e.target.value = ""; 
 
    } 
 
    } 
 

 
    render() { 
 
    return <textarea onKeyUp = {this.sendMessage}></textarea> 
 
    } 
 

 
} 
 

 
ReactDOM.render(<Test/>, document.getElementById("root"));

<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="root"></div>

Answer 2

働いていたが削除された答えは、基本的には、使用、参考文献に言った：https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

constructor(props){ 
this.state({value:""}) 
} 
sendMessage(e) { 
    if (e.key === 'Enter') { 
    this.props.onKeyUp(e.target.value) 
    // I want to clear the textarea around here 
    this.setState({value:""}) 
    } 
} 
handleChange=(e)=>{ 
    this.setState({value :e.target.value}) 
} 
render() { 
    return <textarea value={this.state.value} onChange={this.handleChange} onKeyUp = {this.sendMessage}></textarea> 
}