import React, { Component } from 'react'
export default class Zuoye extends Component {
state={
students:[
{id:1,name:'张三',isStudent:true},
{id:2,name:'李四',isStudent:false},
{id:3,name:'王五',isStudent:true},
{id:4,name:'赵六',isStudent:false},
{id:5,name:'陈七',isStudent:true},
]
}
change=()=>{
}
render() {
return (
<div>
<table>
<thead>
<tr>
<td>编号td>
<td>姓名td>
<td>是否学生td>
<td>操作td>
tr>
thead>
<tbody>
{
this.state.students.map(item=>{
return <tr key={item.id}>
<td>{item.id}td>
<td>{item.name}td>
<td>{item.isStudent==true?'是':'否'}td>
<td>
<button onClick={()=>this.change()}>改变状态button>
td>
tr>
})
}
tbody>
table>
div>
)
}
}
点击事件里怎么写才能修改isStudent的值 this.change需要传item.isStudent进去吗
ChatGPT尝试为您解答,仅供参考
为了能够修改对应人的状态,你需要在按钮的点击事件处理函数 change 中传入当前人的信息,然后在 change 函数中找到对应的人并修改他的状态。
具体实现方式如下:
change=(student)=>{
// 找到对应的人
let students = this.state.students.map(item=>{
if(item.id === student.id){
item.isStudent = !item.isStudent;
}
return item;
});
// 修改状态
this.setState({
students
});
}
然后在渲染表格的时候,将当前人的信息作为参数传给 change 函数:
<button onClick={()=>this.change(item)}>改变状态</button>
这样,你就可以单独修改每个人的状态了。
注意:在修改状态时,你应该使用 setState 方法来修改状态,而不是直接修改状态对象。这是因为在 React 中,组件的状态是不能直接修改的,必须使用 setState 方法来修改状态。
最终的代码应该是这样的:
import React, { Component } from 'react'
export default class Zuoye extends Component {
state={
students:[
{id:1,name:'张三',isStudent:true},
{id:2,name:'李四',isStudent:false},
{id:3,name:'王五',isStudent:true},
{id:4,name:'赵六',isStudent:false},
{id:5,name:'陈七',isStudent:true},
]
}
change=(student)=>{
// 找到对应的人
let students = this.state.students.map(item=>{
if(item.id === student.id){
item.isStudent = !item.isStudent;
}
return item;
});
// 修改状态
this.setState({
students
});
}
render() {
return (
<div>
<table>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>是否学生</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{
this.state.students.map(item=>{
return <tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.isStudent==true?'是':'否'}</td>
<td>
<button onClick={()=>this.change(item)}>改变状态</button>
</td>
</tr>
})
}
</tbody>
</table>
</div>
)
}
}