反応のテキスト領域から入力を読み取るにはどうすればよいですか？

Question

入力が終了したら、テキスト領域から入力を読み取ろうとしています。 onChlueの代わりにこの機能を実現するために、onBlurイベントハンドラが必要な場所を読んでいます。しかし、私が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')) 

Answer 1

あなたはcontrolled componentとuncontrolled componentの概念を混合しています。

あなたがvalueプロパティを使用している場合は、あなたはそれ以外の場合になるだろう、state値を更新するonChangeメソッドを使用する必要が読み取り専用（あなたは、国家によるテキストエリアの値を制御している状態が更新されませんので、もし何テキストエリアに入力すると、状態値によってリセットされます）。

あなたがonChangeメソッドを使用しない場合は、テキストエリアのvalueプロパティを削除し、それはあなたがevent.target.valueで値を取得onBlurの内側に、その後に入力することができます。

（制御されていないコンポーネントを）この例をチェックしてください：

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'/>

Answer 2

を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'/>