仅在反应应用程序中为单击项目设置状态
setState for clicked item only in react app
在我的 React 应用程序中,我有多个复选框,我正在使用 onClick 切换选中状态,它正在设置状态,但它正在为页面中的所有复选框更改状态,我只想要按下的复选框,这是代码:
初始状态:
state: {checked: false}
复选框:
return boxes.map(box => (
<Checkbox checked={this.state.checked} onClick={() => this.onCheck(box.id)} />
))
函数:
onCheck(id) { this.setState({ checked: !this.state.checked }); }
那么您必须为每个复选框设置一个状态变量。为简单起见,让我们将定义第 n 个复选框是否已被选中的所有布尔值放入一个数组中。
你可以这样写一个最小的组件:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { boxes: [{id: 10}, {id: 20}] };
this.state.checked = this.state.boxes.map(() => false);
this.onCheck = this.onCheck.bind(this);
}
onCheck(id) {
let index = this.state.boxes.findIndex(box => box.id==id);
this.setState({
checked: this.state.checked.map((c,i) => i==index ? !c : c)
})
}
render() {
return (<div>
{this.state.boxes.map((box,i) => (
<input
key={box.id}
type="checkbox"
checked={this.state.checked[i]}
onChange={() => this.onCheck(box.id)}
/>
))}
<pre>this.state = {JSON.stringify(this.state,null,2)}</pre>
</div>);
}
}
ReactDOM.render(<App/>, document.querySelector('#root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
它正在更改所有复选框,因为所有复选框都引用状态中的同一个变量。您可以将他们的 ID 存储在一个数组中:
state: {
checkedIdArray: []
}
然后检查当前框的id是否在数组中,判断是否勾选:
<Checkbox
key={box.id}
checked={this.state.checkedIdArray.includes[box.id]}
onClick={() => this.onCheck(box.id)}
/>
最后,您的 onCheck() 方法将如下所示:
onCheck(id) {
if (this.state.checkedIdArray.includes(id)) {
this.setState({
checkedIdArray: this.state.checkedIdArray.filter((val) => val !== id)
});
} else {
this.setState({
checkedIdArray: [...this.state.checkedIdArray, id]
});
}
}
还没有测试过,或者类似的东西应该能带你去你想去的地方。
在我的 React 应用程序中,我有多个复选框,我正在使用 onClick 切换选中状态,它正在设置状态,但它正在为页面中的所有复选框更改状态,我只想要按下的复选框,这是代码:
初始状态:
state: {checked: false}
复选框:
return boxes.map(box => (
<Checkbox checked={this.state.checked} onClick={() => this.onCheck(box.id)} />
))
函数:
onCheck(id) { this.setState({ checked: !this.state.checked }); }
那么您必须为每个复选框设置一个状态变量。为简单起见,让我们将定义第 n 个复选框是否已被选中的所有布尔值放入一个数组中。
你可以这样写一个最小的组件:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { boxes: [{id: 10}, {id: 20}] };
this.state.checked = this.state.boxes.map(() => false);
this.onCheck = this.onCheck.bind(this);
}
onCheck(id) {
let index = this.state.boxes.findIndex(box => box.id==id);
this.setState({
checked: this.state.checked.map((c,i) => i==index ? !c : c)
})
}
render() {
return (<div>
{this.state.boxes.map((box,i) => (
<input
key={box.id}
type="checkbox"
checked={this.state.checked[i]}
onChange={() => this.onCheck(box.id)}
/>
))}
<pre>this.state = {JSON.stringify(this.state,null,2)}</pre>
</div>);
}
}
ReactDOM.render(<App/>, document.querySelector('#root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
它正在更改所有复选框,因为所有复选框都引用状态中的同一个变量。您可以将他们的 ID 存储在一个数组中:
state: {
checkedIdArray: []
}
然后检查当前框的id是否在数组中,判断是否勾选:
<Checkbox
key={box.id}
checked={this.state.checkedIdArray.includes[box.id]}
onClick={() => this.onCheck(box.id)}
/>
最后,您的 onCheck() 方法将如下所示:
onCheck(id) {
if (this.state.checkedIdArray.includes(id)) {
this.setState({
checkedIdArray: this.state.checkedIdArray.filter((val) => val !== id)
});
} else {
this.setState({
checkedIdArray: [...this.state.checkedIdArray, id]
});
}
}
还没有测试过,或者类似的东西应该能带你去你想去的地方。