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;
我收到“无法读取未定义的属性‘set’”。我以为我设置了?除了到目前为止我所写的以外,我不明白我还能如何定义它。如果有人有任何想法请发帖,这是一个需要尽快完成的元素!
最佳答案
您好,您似乎没有从父级传递 ingredient
属性。您可能想使用 getDefaultProps设置您的 ingredient
属性。否则请确保在初始化 IngredientForm 时传递 ingredient
属性。
<IngredientForm ingredient={myIngredient}/>
关于javascript - react :Uncaught TypeError: Cannot read property 'set' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38414754/