ステートレスコンポーネントを使用して登録フォームを作成しますか？

Question

ステートレスコンポーネントを使用してフォームを構築する方法のサンプルコード/説明を誰かに見せてもらえますか？

refを使用してMaterial UIフォームの例も見つかりませんでした。

注：マテリアルUIコンポーネントを使用しています。ここで

私の現在のフォームを作成します

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '', 
     school: '', 
     }; 
} 


    /*in order to access state from within function, I had to bind this when I made 
    the call to submitCandidate i.e. onClick={this.submitCandidate.bind(this)} 
    */ 
    submitCandidate(event){ 
    event.preventDefault(); 
    //assign the form fields to candidates object 
    var newCandidate = { 
     name: this.state.name, 
     school: this.state.school, 
     date: this.state.date 
    } 
    //inserts candidates object to database 
    Candidates.insert(newCandidate); 

    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
     <div> 
     <TextField 
      hintText={"Enter Your Name"} 
      floatingLabelText={"Name"} 
      value={this.state.name} 
      onChange={e => this.setState({ name: e.target.value })} 
     /> 
     <TextField 
      hintText={"Enter Your School"} 
      floatingLabelText={"School"} 
      value={this.state.school} 
      onChange={e => this.setState({ school: e.target.value })} 
     /> 

     <RaisedButton type="submit" label="Submit" onClick={this.submitCandidate.bind(this)} /> 

      </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

Answer 1

ステートレスコンポーネントは、それが状態を保存できないことを意味します。したがって、あなたの国家はどこか他の場所に保管する必要があります。現在のところ、望ましい状態ストアはReduxです。

Reduxに精通しているかどうかわかりません。そうでなければ、insanely famous Dan Abramov's (Redux creator) Egghead.io seriesを見ることをお勧めします。

ReduxがどのようにFLUXパターンを実装しているかを理解している場合は、状態（nameおよびschool）をReduxストアに配置できます。この状態はReduxアクションによって更新されます。これらの関数は、props経由でコンポーネントに渡され、状態の更新も行われます。

EDIT 2017から05：

我々はフォームを処理するためのredux-formと呼ばれるライブラリを使用して開始は+ Reduxのアプリケーションを反応します。それは非常にテスト可能です、ボイラープレートの多くを排除。だから私は間違いなくそれを使用することをお勧めします。