3 回答

TA貢獻1831條經驗 獲得超4個贊
請查看此完整示例?;旧希趩螕籼幚沓绦蛏显O置狀態時遇到了問題。
selectItemClickHandler = () => {
this.setState({
listItems: [{itemOptionSelector: [{isSelected: true}]}]
})
}
selectItemClickHandler 的更新代碼應為:
selectItemClickHandler = (event, index) => {
this.setState(prevState => {
const list = [];
prevState.listItems.map((item, i) => {
if (i === index) {
item.itemOptionSelector.map(selector => {
selector.isSelected = true
})
}
list.push(item);
});
return {
listItems: list
};
});
};
以下是我更改上述代碼的完整示例
import React, {Component} from 'react'
export default class ListExample extends Component {
constructor(props) {
super(props);
this.state = {
listItems: [
{
name: 'firstItem',
itemOptionSelector: [
{id: 1,isSelected: false},
{id: 2,isSelected: false},
{id: 3,isSelected: false},
]
},
{
name: 'secondItem',
itemOptionSelector: [
{id: 1,isSelected: false},
{id: 2,isSelected: false},
{id: 3,isSelected: false},
]
}
]
}
}
selectItemClickHandler = (event, index) => {
this.setState(prevState => {
const list = [];
prevState.listItems.map((item, i) => {
if (i === index) {
item.itemOptionSelector.map(selector => {
selector.isSelected = true
})
}
list.push(item);
});
return {
listItems: list
};
});
};
render() {
const {listItems} = this.state;
return (
<div>
{listItems.map((item, index) => {
return <div key={index} className="button" onClick={(event) => {
this.selectItemClickHandler(event, index)
}}>{item.name}</div>
})}
<button onClick={()=>{ console.log(this.state, 'current state') }}>Show State in Console</button>
</div>
)
}
}

TA貢獻1880條經驗 獲得超4個贊
首先,不清楚你想做什么。您沒有呈現“子項”(或選項),因此當前無法知道應將哪個選項更改為所選狀態。
通常,您可以像這樣更新數組狀態:
state = {
items: [
{ isSelected: false, name: 'first' },
{ isSelected: false, name: 'second' },
{ isSelected: false, name: 'third' },
]
};
// ...
handleItemClick = (item, index) => {
const items = this.state.items.slice();
items[index] = { ...item, isSelected: !item.isSelected };
this.setState({ items });
};
render() {
return this.state.items.map((item, index) =>
<div onClick={() => this.handleItemClick(item, index)}>{item.name}</div>);
}

TA貢獻1839條經驗 獲得超15個贊
我將發布一個示例,因為不清楚您要更新的內容。
假設這是您的狀態。
state = {
items: [
{
id: 1,
isSelected: false,
},
{
id: 2,
isSelected: false,
},
{
id: 3,
isSelected: false,
}
]
};
這就是你如何渲染你的項目。
<ul>
{this.state.items.map((item, index) => (
<li key={item.id} onClick={this.handleToggle(index)}>
{item.id} {item.isSelected + ""}
</li>
))}
</ul>
然后,您的處理程序需要如下所示。
// pay attention to the handler which creates a closure
handleToggle = index => () => {
const items = [...this.state.items];
items[index].isSelected = !items[index].isSelected;
this.setState({ items });
};
添加回答
舉報