Javascript React setState:使用复选框更改布尔值
这里是初学者。检查了类似的主题,但没有找到答案。我正在构建一个页面,您可以在其中创建项目并更新信息。但现在,我正在努力与一个简单的复选框。选中时,活动状态应更改为true,反之亦然。然而,当我点击时,状态没有改变。我已经检查了控制台日志,该函数运行良好,尝试使用prevState和simple setState active:true,但我仍然无法更改它。我可能遗漏了一些明显的东西,如果你能指出的话,请提前感谢 应用程序代码Javascript React setState:使用复选框更改布尔值,javascript,reactjs,checkbox,boolean,Javascript,Reactjs,Checkbox,Boolean,这里是初学者。检查了类似的主题,但没有找到答案。我正在构建一个页面,您可以在其中创建项目并更新信息。但现在,我正在努力与一个简单的复选框。选中时,活动状态应更改为true,反之亦然。然而,当我点击时,状态没有改变。我已经检查了控制台日志,该函数运行良好,尝试使用prevState和simple setState active:true,但我仍然无法更改它。我可能遗漏了一些明显的东西,如果你能指出的话,请提前感谢 应用程序代码 import React from 'react'; import '
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;
从“React”导入React;
导入“/App.css”;
从“./ProductList/ProductList”导入ProductList;
从“./NewProd/NewProd”导入新产品;
类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
姓名:“,
ean:“,
类型:“,
重量:“,
颜色:“,
活动:空,
产品:[{名称:“白菜”,ean:“00000000”,类型:“蔬菜”,重量:“2kg”,颜色:“绿色”,活性:假},
{名称:“香蕉”,ean:“111111111”,类型:“水果”,重量:“0.3kg”,颜色:“黄色”,活性:假},
{名称:“巧克力”,ean:“22222”,类型:“糖果”,重量:“0.2kg”,颜色:“棕色”,活性:假},
{名称:“橙色”,ean:“3333”,类型:“果实”,重量:“0.5kg”,颜色:“橙色”,活性:假},
{名称:“黄瓜”,ean:“4444”,类型:“蔬菜”,重量:“1kg”,颜色:“绿色”,活性:假},]
};
this.isActive=this.isActive.bind(this);
};
handleFormSubmit=(e)=>{
e、 预防默认值();
让products=[…this.state.products];
产品推送({
名称:this.state.name,
伊恩:这个,州,伊恩,
类型:this.state.type,
重量:这个。状态。重量,
颜色:this.state.color,
活动:错误,
});
this.setState({products,name:,ean:,type:,weight:,color:,active:false}
);
}
handleInputChange=(e)=>{
让输入=e.目标;
让name=e.target.name;
设value=input.value;
this.setState({[name]:value})
};
deleteProduct=(delIndex)=>{
让产品=[…this.state.products].filter((产品,索引)=>index!==delIndex);
this.setState({products});
};
isActive=()=>{
this.setState({active:!this.state.active})
}
render(){
返回(
);
}
}
导出默认应用程序;
列表代码
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;
从“React”导入React;
导入“/ProductList.css”;
类ProductList扩展了React.Component{
render(){
const products=this.props.products;
返回(
产品清单
名称
商品条码
类型
重量
颜色
活跃的
{products.map((产品,索引)=>{
返回(
{product.name}
{product.ean}
{product.type}
{乘积.权重}
{product.color}
看法
编辑
this.props.deleteProduct(index)}>Delete
)
})}
)
}
}
导出默认产品列表;
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
});
}
handleInputChange(事件){
const target=event.target;
const value=target.name==‘正在进行’?target.checked:target.value;
const name=target.name;
这是我的国家({
[名称]:值
});
}
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
});
}
handleInputChange(事件){
const target=event.target;
const value=target.name==‘正在进行’?target.checked:target.value;
const name=target.name;
这是我的国家({
[名称]:值
});
}
您需要更新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;
从“React”导入React;
导入“/App.css”;
从“./ProductList/ProductList”导入ProductList;
从“./NewProd/NewProd”导入新产品;
类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
姓名:“,
ean:“,
类型:“,
重量:“,
颜色:“,
活动:空,
产品:[{名称:“白菜”,ean:“00000000”,类型:“蔬菜”,重量:“2kg”,颜色:“绿色”,活性:假},
{名称:“香蕉”,ean:“111111111”,类型:“水果”,重量:“0.3kg”,颜色:“黄色”,活性:假},
{名称:“巧克力”,ean:“22222”,类型:“糖果”,重量:“0.2kg”,颜色:“棕色”,活性:假},
{名称:“橙色”,ean:“3333”,类型:“果实”,重量:“0.5kg”,颜色:“橙色”,活性:假},
{名称:“黄瓜”,ean:“4444”,类型:“蔬菜”,重量:“1kg”,颜色:“绿色”,活性:假},]
};
this.isActive=this.isActive.bind(this);
};
handleFormSubmit=(e)=>{
e、 预防默认值();
让products=[…this.state.products];
产品推送({
名称:this.state.name,
伊恩:这个,州,伊恩,
类型:this.state.type,
重量:这个。状态。重量,
颜色:this.state.color,
活动:错误,
});
这个.setState({produc