在无状态组件中按Enter键进入清除textarea

时间:2017-05-23 20:43:01

标签: reactjs

我在React中构建了一个聊天组件,并且无法在按下回车键后弄清楚如何清除textarea元素。该组件是无状态的,并且没有与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>
  ...

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

在完成工作后,只需清除value target

e.target.value = "";

示例:

&#13;
&#13;
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"));
&#13;
<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>
&#13;
&#13;
&#13;