[英]React setState: using checkbox to change boolean value
在这里反应初学者。 检查了类似的主题,还没有找到答案。 我正在构建一个页面,您可以在其中创建项目和更新信息。 但是现在我正在为一个简单的复选框而苦苦挣扎。 选中时,活动状态应更改为 true,反之亦然。 但是,当我点击时,统计数据不会改变。 我已经检查了控制台日志并且该功能工作正常,尝试使用 prevState 和简单的 setState active:true,但我仍然无法更改它。 我可能遗漏了一些明显的东西,所以如果你能指出它,提前致谢。
应用程序代码
import React from 'react';
import './App.css';
import ProductList from "../ProductList/ProductList";
import NewProd from "../NewProd/NewProd";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
ean: "",
type: "",
weight: "",
color: "",
active: null,
products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false},
{name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false},
{name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false},
{name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false},
{name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
};
this.isActive = this.isActive.bind(this);
};
handleFormSubmit = (e) => {
e.preventDefault();
let products = [...this.state.products];
products.push({
name: this.state.name,
ean: this.state.ean,
type: this.state.type,
weight: this.state.weight,
color: this.state.color,
active: false,
});
this.setState({ products, name: "", ean: "", type: "", weight: "", color: "", active: false}
);
}
handleInputChange = (e) => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({[name]: value})
};
deleteProduct = (delIndex) => {
let products = [...this.state.products].filter((product, index) => index !== delIndex);
this.setState({ products });
};
isActive = () => {
this.setState({active: !this.state.active})
}
render() {
return (
<div className="App">
<ProductList products={this.state.products}
deleteProduct={this.deleteProduct}
isActive={this.isActive} />
<NewProd handleFormSubmit={this.handleFormSubmit}
handleInputChange={this.handleInputChange}
newName={this.state.name}
newEan={this.state.ean}
newType={this.state.type}
newWeight={this.state.weight}
newColor={this.state.color} />
</div>
);
}
}
export default App;
列表代码
import React from "react";
import "./ProductList.css";
class ProductList extends React.Component {
render() {
const products = this.props.products;
return (
<div>
<h1>Product List</h1>
<table>
<tr>
<th>Name</th>
<th>EAN Code</th>
<th>Type</th>
<th>Weight</th>
<th>Color</th>
<th>Active</th>
</tr>
{products.map((product, index) => {
return (
<tr key={index}>
<td>{product.name}</td>
<td>{product.ean}</td>
<td>{product.type}</td>
<td>{product.weight}</td>
<td>{product.color}</td>
<td><input type="checkbox" onChange={this.props.isActive} /></td>
<td><button>View</button></td>
<td><button>Edit</button></td>
<td><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
</tr>
)
})}
</table>
</div>
)
}
}
export default ProductList;
onChange
需要一个回调函数,而不是一个布尔值
根据文档,这是您需要遵循的方式
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing} // booean condition here for checked or not
onChange={this.handleInputChange} />
handleInputChange(event) {
const target = event.target;
const value = target.name === 'isGoing' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
您需要更新products
数组中的products
状态。 尝试这个:
import React from 'react';
import './App.css';
import ProductList from "../ProductList/ProductList";
import NewProd from "../NewProd/NewProd";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
ean: "",
type: "",
weight: "",
color: "",
active: null,
products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false},
{name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false},
{name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false},
{name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false},
{name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
};
this.isActive = this.isActive.bind(this);
};
handleFormSubmit = (e) => {
e.preventDefault();
let products = [...this.state.products];
products.push({
name: this.state.name,
ean: this.state.ean,
type: this.state.type,
weight: this.state.weight,
color: this.state.color,
active: false,
});
this.setState({ products, name: "", ean: "", type: "", weight: "", color: "", active: false}
);
}
handleInputChange = (e) => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({[name]: value})
};
deleteProduct = (delIndex) => {
let products = [...this.state.products].filter((product, index) => index !== delIndex);
this.setState({ products });
};
isActive = () => {
this.setState({active: !this.state.active})
}
setProductActive = (product, active) => {
this.setState((state) => ({
products: state.products.map(p => p.name === product.name ? { ...p, active } : p)
}))
}
render() {
return (
<div className="App">
<ProductList products={this.state.products}
deleteProduct={this.deleteProduct}
setProductActive={this.setProductActive} />
<NewProd handleFormSubmit={this.handleFormSubmit}
handleInputChange={this.handleInputChange}
newName={this.state.name}
newEan={this.state.ean}
newType={this.state.type}
newWeight={this.state.weight}
newColor={this.state.color} />
</div>
);
}
}
export default App;
import React from "react";
import "./ProductList.css";
class ProductList extends React.Component {
render() {
const products = this.props.products;
return (
<div>
<h1>Product List</h1>
<table>
<tr>
<th>Name</th>
<th>EAN Code</th>
<th>Type</th>
<th>Weight</th>
<th>Color</th>
<th>Active</th>
</tr>
{products.map((product, index) => {
return (
<tr key={index}>
<td>{product.name}</td>
<td>{product.ean}</td>
<td>{product.type}</td>
<td>{product.weight}</td>
<td>{product.color}</td>
<td><input type="checkbox" checked={product.active} onChange={(e) => this.props.setProductActive(product, e.target.checked)} /></td>
<td><button>View</button></td>
<td><button>Edit</button></td>
<td><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
</tr>
)
})}
</table>
</div>
)
}
}
export default ProductList;
我添加了setProductActive
方法。 希望它能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.