純粋なES2015関数で "setState"に反応する方法

Question

ここにnewbを反応させてください。私はフォーム（プレゼンテーションコンポーネント）を返す純粋な関数を持っています。このフォームでは、制御されているテキストフィールドのonChangeイベントを処理する必要があります。 FWIU、私はthis.setState（...）onChangeイベントハンドラで必要です。しかし、これが純関数なので、this.setState（）へのアクセス権はありません。 ES2015関数のこれらのonChangeイベントで状態を設定する良い方法はありますか？これが役に立ったら、私はreduxも使用しています。コード例：

Stateless Functionある

import React, {PropTypes} from 'react' 

const ApplicationForm = ({submitHandler, person}) => (
<form onSubmit={e => submitHandler(e)}> 
<div> 
      <label htmlFor="firstName">First Name:</label> 
      <input type="text" name="firstName" onChange={e => setState(e.target.value)} value={person.firstName || ''}/> 
</div> 
... 
</form> 
) 

Answer 1

、

あなたはReduxのを使用している場合、あなたはおそらく、新しい値を渡す、のonChangeでReduxのアクションをトリガーするを設定するには何の状態はありません引数、アクションの更新私は

Answer 2

ステートレス機能成分c定型の束を減らすためにredux-form見てみる推薦person.firstName

ためReduxのストア内のfirstNameの値を持っており、状態を持っていない...彼らは無国籍なので。イベントハンドラを呼び出して状態を設定する場合は、React.createClassまたはES6クラスを使用してコンポーネントクラスを作成する必要があります。

Answer 3

実際には、機能コンポーネントのように見えるものでsetStateを使用することはできますが、かなりハッキリです。私はこの方法が実際にこのキーワードとクラス構文を使用して立つことができない人だけであると想像します。それでも、私はそれが楽しいと思う。

は、ここでは、このとクラスの構文を使用して通常の方法で他の要素を変更する入力を書くかもしれない方法は次のとおりです。

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {text: "Hello, world"}; 
    } 

    handleChange = (event) => { 
     this.setState({text: event.target.value}); 
    } 

    render() { 
     return (
      <div> 
       <input value={this.state.text} onChange={this.handleChange} /> 
       <h1>{this.state.text}</h1> 
      </div> 
     ) 
    } 
} 

そして、ここでは、あなたがこのとクラス構文なしで同じ効果を作成することができます方法です：

function App() { 
    "use strict"; 

    const obj = { 
     state: {text: "Hello, world"}, 
     __proto__: React.Component.prototype 
    }; 

    obj.handleChange = function (event) { 
     obj.setState({text: event.target.value}); 
    }; 

    obj.render = function() { 
     return (
      <div> 
       <input value={obj.state.text} onChange={obj.handleChange} /> 
       <h1>{obj.state.text}</h1> 
      </div> 
     ); 
    }; 

    return obj; 
} 

トリックは、Appは、REACに戻り、オブジェクトのdunderプロトプロパティを設定することによりReact.Componentからアプリの機能を継承することですt.Componentのプロトタイプで、setStateを使用できるようにします。

コードで遊びたい場合は、codepenです。