React + ASP.netですべてのチェックボックスの小道具を得る方法mvc

Question

私はReactとASP.net（コアではない）を学んでいます。 私は練習用の小さなプロジェクトを作成しようとします。

私はいくつかのチェックボックスと送信ボタンを持っています。 アイデアは、ボタンをクリックすると、チェックボックスのテキストとその状態（check \ uncheck）のリストを含むJasonを作成します。 ジェイソン私はサーバーに送信したいです。

コンポーネントと関連するイベントを作成します。 しかし、以下を作成しないでください

1）送信コンポーネントからチェックボックスの状態を取得し、そこからJasonを作成します。

2）Jasonをサーバー側（ASP.net）に送信します。

私はtutorialを流そうとしましたが、それを得られなかったので、インターネット上で解決策を見つけようとしましたが、不足はありませんでした。

誰かがそれを行うにはどのように私を見ることができれば - または私

おかげ

JSKに役立ついくつかの方向与える：

var data = [ 
    { Id: 1, ActionItem: "Action1" }, 
    { Id: 2, ActionItem: "Action2" }, 
    { Id: 3, ActionItem: "Action3" } 
]; 
var Checkbox = React.createClass({ 
getInitialState: function() { 
    return { 
    isChecked: false 
    }; 
}, 

toggleChange: function() { 
    this.setState({ 
    isChecked: !this.state.isChecked 
    }, 
function() { 
    console.log(this.state); 
    }.bind(this)); 
}, 
render: function() { 
    return (
    <label> 
    <input type="checkbox" 
    checked={this.state.isChecked} 
    onChange={this.toggleChange} />{this.props.chkboxlabel}<br /> 
    </label> 
); 
} 
}); 

var ActionBox = React.createClass({ 
    render: function() { 
    return (
     <div className="actionBox"> 
     <h1>Select Action </h1> 
     <CheckboxList data={this.props.data} /> 
     <SubmitForm/> 
     </div> 
    ); 
    } 
}); 

var CheckboxList = React.createClass({ 
    render: function() { 
    var actionNodes = this.props.data.map(function(action) { 
     return (
     <Checkbox chkboxlabel={action.ActionItem} key={action.id}> 
      {action.ActionItem} 
     </Checkbox> 
    ); 
}); 
return (
    <form className="actionList">{actionNodes} 
    </form> 
    ); 
    } 
}); 


var SubmitForm = React.createClass({ 
    handleSubmit: function(e) { 
     //?? 
}, 
render: function() { 
    return (
     <form className="actionForm" onSubmit={this.handleSubmit}> 
     <input type="submit" value="Run" /> 
     </form> 
    ); 
    } 
}); 

ReactDOM.render(
    <ActionBox data={data} />, 
    document.getElementById('content') 
); 

Answer 1

を私はドン」に機能するソリューションを見つけましたそれが最良の方法だと思うが、多分それが他の人を助けるだろう。 私は要素を値を取得するために考えました - 私は反応でそれを行うより良い方法があると信じています。

var data = [ 
{ Label: "Action 1", IsChecked: false, Name: "a1" }, 
{ Label: "Action 2", IsChecked: false, Name: "a2" }, 
{ Label: "Action 3", IsChecked: false, Name: "a3" } 

]; 
handleCommentSubmit: function() { 
    var data = new FormData(); 
    var inputs = document.getElementsByName('mycheckbox'); 
    for (var i = 0; i < inputs.length; i++) { 
     var name = inputs.item(i).value; 
     var ischecked = inputs.item(i).checked; 
     data.append(name, ischecked); 
    } 
    var xhr = new XMLHttpRequest(); 
    xhr.open('post', this.props.submitUrl, true); 
    xhr.send(data); 
},