[英]Why am I getting a TypeError when start typing in my input? - ReactJS
我正在创建“食谱盒”应用程序,但是在创建食谱时, 食谱名称的输入有问题。
这是我在主要组件中的状态:
class RecipeBoxContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
recipes: [
{
name: "test123",
products: ["313", "dasd", "dasfg"]
},
{
name: "test",
products: ["product", "product 2", "product 2", "product 3"]
}
],
count: 1,
productInputValues: {
name: "",
products: []
}
};
this.renderInputs = this.renderInputs.bind(this);
this.addInput = this.addInput.bind(this);
this.deleteRecipe = this.deleteRecipe.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleNameChange = this.handleNameChange.bind(this);
}
错误的来源:
renderInputs() {
debugger;
let inputs = [];
for (let i = 0; i < this.state.count; i++) {
inputs.push(
<div key={i}>
<FormControl
type="text"
value={this.state.productInputValues.products[i] || ""}
onChange={this.handleChange.bind(this, i)}
placeholder={"Product " + (i + 1)}
/>
<Button onClick={this.removeInput.bind(this, i)}>Remove</Button>
</div>
);
}
return inputs || null;
}
我的onChange输入处理程序:
handleChange(i, event) {
debugger;
let productInputValues = this.state.productInputValues.products;
productInputValues[i] = event.target.value;
this.setState({
productInputValues: {
products: productInputValues
}
});
}
handleNameChange(event) {
debugger;
this.setState({
productInputValues: {
name: event.target.value
}
});
}
并使用此组件创建食谱:
class AddRecipe extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
render() {
return (
<div>
<Button bsStyle="primary" bsSize="large" onClick={this.open}>
Add Recipe
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Add Recipe</Modal.Title>
</Modal.Header>
<form onSubmit={this.props.onSubmit}>
<Modal.Body>
<FormGroup controlId="RecipeName">
<ControlLabel>Recipe</ControlLabel>
<FormControl
type="text"
placeholder="Recipe Name"
onChange={this.props.handleNameChange}
/>
</FormGroup>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Products</ControlLabel>
{this.props.renderInputs()}
</FormGroup>
<Button onClick={this.props.addInput}>Add Product</Button>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="success" type="submit">
Next station: Kitchen
</Button>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</form>
</Modal>
</div>
);
}
}
您正在更改对象productInputValues ..它确实具有产品。 在handleChange和handleNameChange中,请使用传播运算符..或正确复制对象。
handleChange(i, event) {
debugger;
let productInputValues =
this.state.productInputValues.products;
productInputValues[i] = event.target.value;
this.setState({
productInputValues: {...this.state.productInputValues,
products: productInputValues
}
});
}
handleNameChange(event) {
debugger;
this.setState({
productInputValues: {...this.state.productInputValues,
name : event.target.value
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.