var React = require('react');
var Recipe = require('../models/recipes.js').Recipe;
var IngredientCollection =require('../models/recipes.js').IngredientCollection;
var IngredientForm = React.createClass({
getInitialState: function(){
var ingredients = new IngredientCollection();
ingredients.add([{}]);
return{
ingredients: ingredients,
recipe: new Recipe()
};
},
handleAmount: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('amount', e.target.value);
},
handleUnits: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('units', e.target.value);
},
handleName: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('name', e.target.value);
},
render: function(){
var ingredient = this.props.ingredient;
var count = this.props.counter + 1;
return (
<div className="ingredients row">
<h1 className="ingr-heading">Ingredients</h1>
<div className="ingredient-wrapper col-xs-10 col-xs-offset-1">
<input onChange={this.handleAmount} ref={"amount"} type="text" className="amount form-control" id="amount" placeholder="Amount"/>
<select onChange={this.handleUnits} ref={"units"} className="unit form-control" defaultValue="A">
<option disabled value="A">unit</option>
<option value="B">tsp.</option>
<option value="C">tbsp.</option>
<option value="D">fl oz(s)</option>
<option value="E">cup(s)</option>
<option value="F">pt(s)</option>
<option value="G">qt(s)</option>
<option value="H">gal(s)</option>
<option value="I">oz(s)</option>
<option value="J">lb(s)</option>
</select>
<input onChange={this.handleName} ref={"name"} type="text" className="ingr-place form-control" id="name" placeholder="Ingredient"/>
<button id="submit-ingredient" type="button" className="btn btn-default">Add</button>
</div>
</div>
// <div className="recipe-form">
// <form className="holding" onSubmit={this.handleNewRecipe}>
// <span className="make">Makes</span>
// <input type="text" className="servings" onChange={this.handleNameChange} ></input>
// <span className="how-many">Servings</span>
// <button className="btn btn-primary">Adjust Recipe</button>
// </form>
// </div>
)
}
})
var RecipeForm = React.createClass({
getInitialState: function(){
var ingredients = new IngredientCollection();
ingredients.add([{}]);
return{
ingredients: ingredients,
recipe: new Recipe()
};
},
componentWillMount: function(){
var self = this;
var recipe = this.state.recipe;
recipe.on('change', this.update);
this.state.ingredients.on('add', this.update);
},
update: function(){
this.forceUpdate();
},
handleSubmit: function(e){
e.preventDefault();
var router = this.props.router;
var recipe = this.state.recipe;
var ingredients = this.state.ingredients;
recipe.set('ingredients', ingredients.toJSON());
console.log(recipe);
recipe.save().done(function(e){
router.navigate('recipes/add', {trigger: true});
});
},
handleTitleChange: function(e){
this.state.recipe.set('title', e.target.value)
},
render: function(){
return(
<form>
<IngredientForm />
</form>
)
}
})
module.exports = RecipeForm;
Im get "can not read property 'set' of undefined". Я думал, что это сделал? Я не понимаю, как иначе я могу определить его, кроме того, что я написал до сих пор. Если у кого-нибудь есть идеи, напишите, это для проекта, который нужно сделать в ближайшее время!React: Uncaught TypeError: Невозможно прочитать свойство 'set' of undefined
IngredientForm является родителем? –
Эй, извините, возможно, я использовал неправильную формулировку. Я отмечаю в 'RecipeForm', вы инициализируете' IngredientForm', но не сбрасываете свойство 'component'. Прямо сейчас 'this.props.ingredient' не определено в вашей' IngredientForm'. – Miles
hmm im все равно получаю то же сообщение об ошибке, и я сделал: –