ReactjsのMVVMのようなフレームワークを実現する方法

Question

私は単純な問題があります。私はReactJSの使い方を誤解していると思います。

低レベルを作成したい再利用可能なコンポーネント標準レイアウトでフォームを作成してください。

このようなものを考えてみましょう。

var Note = React.createClass({ 

    getInitialState: function() { 
     return ActionData.Model; //the form model 
    }, 

    render: function() { 
     var model = this.state; 
     return (
      <Fieldset id="testId" Legend={Language.Note}> 
       <SingleColumn Lable="Note"> 
        <Textarea value={model.Text} /> 
       </SingleColumn> 
       <TwinColumn RightLable="Date" LeftLable=""> 
        <DatePicker ReadOnly="true" Date={model.DisplayDate} /> 
        <Checkbox Title="show " /> 
       </TwinColumn> 
       <input type="button" value="Save" onClick={this.save} /> 
      </Fieldset> 
      ) 
    }, 

    save: function() { 
     var model = this.state; 
     //save the model here ... . 
    } 
}); 

$(function() { 
    ReactDOM.render(<Note />, $("#myContent")[0]); 
}) 

とインスタンスのための「テキストエリア」コンポーネントで

var Textarea = React.createClass({ 

    getInitialState: function() { 
     return { 
      value: this.props.value 
     }; 
    }, 

    render: function() { 
     return <input type="text" className="form-control" value={this.state.value} onChange={e => this.setState({value: e.target.value})} /> 
    } 
}); 

は、どのように私は「テキストエリア」変化状態に「注意」コンポーネントの状態を更新することができますか？ （MVVMフレームワークのようなものを実行する）。

私は正しい方向に歩いていますか？

このようなことができるのはReactJですか？

Answer 1

あなたが小道具を経由してTextAreaコンポーネントにご注意コンポーネントから関数を渡す必要があります。

<Textarea value={model.Text} onValueChange={(value) => this.setState({ value })} /> 

このように、あなたの子コンポーネントTextareaは、単に単に渡さonValueChange関数を呼び出すことができます：

return (
    <input type="text" className="form-control" 
    value={this.state.value} 
    onChange={e => this.props.onValueChange(e.target.value)} /> 
);