在无状态组件中按回车键清除文本区域答案

【问题标题】：Clearing textarea on pressing enter in React, in a stateless component在无状态组件中按回车键清除文本区域
【发布时间】：2017-05-23 20:43:01
【问题描述】：

我正在 React 中构建一个聊天组件，但不知道在按下 Enter 键后如何清除 textarea 元素。该组件是无状态的，并且没有与 textarea 关联的 props，因此它永远不会重新渲染。

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>
  ...

【问题讨论】：

标签： reactjs

【解决方案1】：

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>
}

【讨论】：

【解决方案2】：

在你用价值工作后，只需清除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>

【讨论】：

【解决方案3】：

一个有效的答案被删除了，基本上它说使用参考：https://facebook.github.io/react/docs/refs-and-the-dom.html

【讨论】：