React.js - フォーカスの制御されたテキストエリアの初期値をクリアする

Question

制御されたテキストエリアの場合、this exampleでは、初期値を設定して値を更新する方法を示します。ユーザーからの入力をさらにクリアせずにフィールドが初めてフォーカスされているときに、この初期値をクリアするにはどうすればよいですか。

初期値設定：次に持って

<textarea value={this.state.value} onChange={this.handleChange} onFocus={this.handleFocus} /> 

：

handleFocus(event) { 
    this.setState({value: ''}); 
    } 

これが機能していないが、私はあなたのような何かをするだろうと仮定し

this.state = { 
    value: 'Please write an essay' 
}; 

を。何かアドバイス？

Codepen：https://codepen.io/anon/pen/KZVeWB?editors=0010

Answer 1

であなたのhandleFocus方法をbindする逃しました。テキストエリアがイベントハンドラを呼び出すと、「this」はその関数が定義されたコンポーネントを参照しません。実際には、イベントハンドラ関数自体を参照すると思います。あなたはES7を使用している場合にもラムダメンバ変数として、あなたのメソッドを定義することができ

onFocus={this.onFocus.bind(this)} 

：

この歩き回るの通常の方法「はこの」イベントハンドラに結合され

class MyComponnet { 
    onFocus = (e) => { ... } 
    render() { 
    return <textarea onFocus={this.onFocus} /> 
    } 
} 

これは、jsのlambdaが自動的に周囲のすべてをキャプチャするために機能します。それは少しきれいに見えます。

また、あなたの代わりにplaceholder属性を使用して検討する必要があります。 https://www.w3schools.com/tags/att_textarea_placeholder.asp

Answer 2

あなたは、イベントハンドラのように、コンポーネントに関数を渡すと、「この」キャプチャが失われconstructor機能

this.handleFocus = this.handleFocus.bind(this)