Stateless Components를 사용하여 등록 양식을 만드시겠습니까?

Question

누군가가 stateless 구성 요소를 사용하여 양식을 작성하는 방법에 대한 샘플 코드/설명을 보여줄 수 있습니까?

refs를 사용하여 Material UI 양식 예제를 찾을 수 없습니다.

참고 : Material 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을 통해 구성 요소에 전달됩니다.

편집 2017-05 :

우리는 라이브러리를 사용하기 시작이의 형태를 처리하기위한 redux-form라고는 + 돌아 오는 응용 프로그램을 반응한다. 그것은 boillerplate 많이 제거, 매우 testable입니다. 그래서 나는 확실히 그것을 사용하는 것이 좋습니다 것입니다.