1
チュートリアルに従っているので、AJAX呼び出しによって新しいレコード（ゲーム）が作成された後、ゲームボックスを再レンダリングしようとしています。リアレール：レコードが作成された後にコンポーネントが再レンダリングされない
レコードが保存されて、私はしかし、これはように反応するように見えるではない、さわやかでそれを見ることができています...
コンテナ：
var GamesBox = React.createClass ({
getInitialState: function(){
return {
game: this.props.games
}
},
parentGameSubmit (formData){
$.ajax({
url: "/games",
dataType: 'json',
type: 'POST',
data: formData,
success: function(games) {
this.setState({games: games});
}.bind(this),
error: function(response, status, err) {
console.log(this.props.url, status, err.toString())
}.bind(this)
});
},
render() {
return (
<div>
<h1> Hey everyone </h1>
<Game games={this.state.game} />
<GameForm parentGameSubmit={this.parentGameSubmit}/>
</div>
);
}
});ゲームリスト表示：
var Game = React.createClass({
renderProjectRows: function(){
return(
this.props.games.map(function(game){
return(
<div className="row" style={{marginTop: "20px"}} key={game.id}>
<div className="col-sm-2">
<h2 className="text-center" key={game.id}><a href={"/games/" + game.id}> {game.name} </a></h2>
</div>
</div>
)
})
);
},
render: function() {
return(
<div>
<div className="row" style={{marginTop: "50px"}}>
<div className="col-sm-2">
</div>
<div className="col-sm-2" style={{fontWeight: "bold"}}>
Name
</div>
</div>
{this.renderProjectRows()}
</div>
);
}
});フォーム：
var GameForm = React.createClass({
getInitialState: function(){
return {name: ""};
},
resetState: function(){
this.setState({name: ""});
},
newGameSubmit: function(e){
e.preventDefault();
this.props.parentGameSubmit({game: {name: this.state.name, white_castling: this.state.white_castling, black_castling: this.state.black_castling}},
this.resetState);
this.setState({name: ''});
},
handleNameChange: function(e){
this.setState({name: e.target.value});
},
renderGameNameField: function(){
return(
<div className='row'>
<div className='col-sm-4'>
<div className= 'form-group'>
<input
name="game[name]"
type="string"
placeholder="Game name"
value={this.state.name}
onChange={this.handleNameChange}
className="string form-control"
/>
</div>
</div>
</div>
);
},
render: function() {
return(
<div>
<h4 style={{marginTop: "50px"}}> Create New Game </h4>
<form style={{marginTop: "30px"}} onSubmit={this.newGameSubmit}>
<div className='form-inputs'/>
{this.renderGameNameField()}
<div className='row'>
<div className='col-sm-4'>
<input type="submit" value="Save" className='btn btn-primary' />
</div>
</div>
</form>
</div>
);
}
});ゲームコントローラ：
class GamesController < ApplicationController
before_action :authenticate_user!
def index
@game = Game.all
end
def new
@game = Game.new
end
def create
@game = Game.new(game_params)
respond_to do |format|
if @game.save
@game.update(white_user_id: current_user[:id])
format.html { redirect_to @game, notice: 'Project was successfully created.' }
format.json { render json: Game.all.order(:name)}
else
format.html {render :new}
end
end
end
private
def game_params
params.require(:game).permit(:name, :white_castling, :black_castling)
end
end
洞察
で私を襲ってください
'React.createClass'はすべての機能を自動的に自動バインドします。' onChange = {this.handleNameChange.bind（this）} 'と' onSubmit = {this.newGameSubmit.bind（this）} 'は何も変更しません。 –