如何在反應中從文本區域讀取我的輸入？

我試圖從文本區域輸入一次，然後輸入完成。我在某處讀到你需要onBlur事件處理程序來實現這個功能，而不是onChange。但是，當我使用onBlur時，我無法輸入我的輸入。我哪裏錯了？如何在反應中從文本區域讀取我的輸入？

import React from 'react' 
import ReactDOM from 'react-dom' 
class HelloWorld extends React.Component{ 
    constructor(props) { 
     super(props) 
     this.state = { 
      value: '', 
     } 
    } 
    handleChange(event) { 
     this.setState({value: event.target.value}) 
     console.log(this.state.value) 
    }  
    render(){ 
     return(
      <div> 
       <h1>Hello World Restaurant</h1> 
       <textarea placeholder="Enter name of guest:" onBlur={this.handleChange.bind(this)} value={this.state.value}></textarea> 
      </div> 
     ) 
    } 
} 
ReactDOM.render(<HelloWorld/>,document.getElementById('root'))

來源

2017-06-06 Pranay Ankit

有你啦閱讀文檔？ https://facebook.github.io/react/docs/forms.html –

@mike是的我已閱讀文檔。 –

你混合的controlled component和uncontrolled component概念。

如果您正在使用value屬性，那麼你需要使用onChange方法來更新state值，否則會顯得只讀（你控制由國家textarea的價值，因此，如果狀態將不會更新任何你輸入textarea將通過狀態值得到重置）。

如果你不想onChange方法然後刪除textarea的的值屬性，它可以讓你鍵入然後裏面onBlur由event.target.value獲得的價值。

檢查這個例子（非受控組件）：

class HelloWorld extends React.Component{ constructor(props) { super(props) this.state = { value: '', } } handleChange(event) { this.setState({value: event.target.value}) } render(){ return( <div> <h1>Hello World Restaurant</h1> value: {this.state.value} <br/> <textarea placeholder="Enter name of guest:" onBlur={this.handleChange.bind(this)}></textarea> </div> ) } } ReactDOM.render(<HelloWorld/>, 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'/>

來源

2017-06-06 07:00:57

如果我想以新行顯示輸入的輸入內容，該怎麼辦？ –

沒有讓你知道你的意思是換行嗎？你想在哪裏顯示輸入文字？ –

我得到這樣的輸出「值：你好怎麼樣，但我希望這樣顯示」值：你好如何「所有在新線 –

爲了增加Mayank的回答，

我會建議你使用控制輸入作爲git的爲您提供更多稍後使用數值的靈活性

你可以這樣做，就像

class HelloWorld extends React.Component{ 
 
    constructor(props) { 
 
     super(props) 
 
     this.state = { 
 
      value: '', 
 
     } 
 
    } 
 
    handleBlur() { 
 
     console.log('You finished typing:', this.state.value) 
 
    } 
 
    handleChange(event) { 
 
     this.setState({value: event.target.value}) 
 
    } 
 
    
 
    render(){ 
 
     return(
 
      <div> 
 
       <h1>Hello World Restaurant</h1> 
 
       value: {this.state.value} 
 
       <br/> 
 
       <textarea placeholder="Enter name of guest:" onChange={this.handleChange.bind(this)} value={this.state.value} onBlur={this.handleBlur.bind(this)}></textarea> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(<HelloWorld/>, 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'/>

來源

2017-06-06 08:10:51

如何在反應中從文本區域讀取我的輸入？

回答

相關問題