render作用
在React组件中，render 是一个生命周期方法，它负责定义组件的UI结构。每当组件的状态（state）或属性（props）发生变化时，render 方法会被调用，以重新渲染组件，展示最新的数据。
render 方法的主要作用包括：
- 返回JSX：render 方法需要返回一个有效的JSX（JavaScript XML）代码，React会根据这个返回值来构建和更新虚拟DOM，并最终渲染到浏览器中。
- 提供组件的结构：它定义了组件如何展示，包括包含的子组件、HTML元素等。
- 状态和属性：在 render 方法中，可以访问组件的状态和属性，然后根据这些数据来动态生成UI。例如，在你的代码中可以根据 studentList 和 searchValue 来过滤和显示学生的列表。
整体来说，render 方法是React组件的核心，因为它负责组件的可视化表示，是React与用户交互的基础。
比如这个页面，需要实时更新页面，所以主页面要用render包裹
import React from 'react';
import { Button, Input, Modal, Table, Divider, Form, Radio } from 'antd';
class Page1 extends React.Component {
constructor(props) {
super(props);
this.state = {
visibleOfCreateStudent: false,//是否可见
visibleOfEditStudent: false,// 是否可见
studentList: [],//学生列表
createInputValue: { name: '', gender: '', studentId: '', address: '' },// 创建学生模态框输入框值
willBeEditStudent: null,// 待编辑学生索引
newStudentValue: { name: '', gender: '', studentId: '', address: '' },// 待编辑学生信息
searchValue: '',// 搜索框值
};
}
showCreateModal = () => {
this.setState({ visibleOfCreateStudent: true });
};
handleCreateCancel = () => {
this.setState({ visibleOfCreateStudent: false, createInputValue: { name: '', gender: '', studentId: '', address: '' } });
};
handleCreateOk = () => {
// 添加学生
this.setState(prevState => ({
studentList: [...prevState.studentList, { ...prevState.createInputValue, id: Date.now() }], // 新增学生信息
visibleOfCreateStudent: false, // 关闭模态框
createInputValue: { name: '', gender: '', studentId: '', address: '' } // 重置输入框
}), () => {
// 在状态更新完成后输出 studentList
console.log(this.state.studentList);
});
};
showEditModal = (index) => {
this.setState({
visibleOfEditStudent: true,// 打开模态框
willBeEditStudent: index,// 待编辑学生索引
newStudentValue: this.state.studentList[index]// 待编辑学生信息
});
};
handleEditCancel = () => {
this.setState({ visibleOfEditStudent: false, willBeEditStudent: null, newStudentValue: { name: '', gender: '', studentId: '', address: '' } });
};
handleEditOk = () => {
const { willBeEditStudent, newStudentValue, studentList } = this.state;// 待编辑学生索引，待编辑学生信息，学生列表
const newList = [...studentList];// 复制学生列表
newList[willBeEditStudent] = newStudentValue;// 更新学生信息
this.setState({// 更新学生列表，关闭模态框
studentList: newList,
visibleOfEditStudent: false,
willBeEditStudent: null,
newStudentValue: { name: '', gender: '', studentId: '', address: '' }
});
};
removeStudent = (index) => {
const newList = this.state.studentList.filter((_, i) => i !== index);
this.setState({ studentList: newList });
};
handleSearchChange = (e) => {
this.setState({ searchValue: e.target.value });
};
render() {
const { studentList, visibleOfCreateStudent, visibleOfEditStudent, createInputValue, newStudentValue, searchValue } = this.state;
const filteredStudentList = studentList.filter(student =>
student.name.includes(searchValue) || student.studentId.includes(searchValue)
);
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
},
{
title: '学号',
dataIndex: 'studentId',
key: 'studentId',
},
{
title: '家庭住址',
dataIndex: 'address',
key: 'address',
},
{
title: '操作',
key: 'action',
render: (_, record, index) => (
<>
<Button type="link" onClick={() => this.showEditModal(index)}>编辑</Button>
<Button type="link" danger onClick={() => this.removeStudent(index)}>删除</Button>
</>
),
},
];
return (
<div style={{ padding: '20px' }}>
<div style={{ display: 'flex', width: '100%', marginBottom: '10px' }}>
<Input.Search
placeholder="搜索学生姓名或学号"
value={searchValue}
onChange={this.handleSearchChange}
style={{ flex: 1, marginRight: '10px' }}
/>
<Button type="primary" onClick={this.showCreateModal} style={{ flex: '0 0 100px' }}>
添加学生
</Button>
</div>
{/* 分割线 */}
<Divider />
<Table
dataSource={filteredStudentList}//数据来源
columns={columns}//表头
rowKey="id"//主键
pagination={true}//分页
/>
{/* 添加学生模态框 */}
<Modal
title="添加学生"
visible={visibleOfCreateStudent}//是否可见
onOk={this.handleCreateOk}//确定按钮
onCancel={this.handleCreateCancel}//取消按钮
>
<Form layout="vertical">
<Form.Item label="姓名">
<Input
value={createInputValue.name}
onChange={(e) => this.setState({ createInputValue: { ...createInputValue, name: e.target.value } })}
placeholder="输入姓名"
/>
</Form.Item>
<Form.Item label="性别">
<Radio.Group
onChange={(e) => this.setState({ createInputValue: { ...createInputValue, gender: e.target.value } })}
value={createInputValue.gender}
>
<Radio value="男">男</Radio>
<Radio value="女">女</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="学号">
<Input
value={createInputValue.studentId}
onChange={(e) => this.setState({ createInputValue: { ...createInputValue, studentId: e.target.value } })}
placeholder="输入学号"
/>
</Form.Item>
<Form.Item label="家庭住址">
<Input
value={createInputValue.address}
onChange={(e) => this.setState({ createInputValue: { ...createInputValue, address: e.target.value } })}
placeholder="输入家庭住址"
/>
</Form.Item>
</Form>
</Modal>
{/* 编辑学生模态框 */}
<Modal
title="编辑学生"
visible={visibleOfEditStudent}
onOk={this.handleEditOk}
onCancel={this.handleEditCancel}
>
<Form layout="vertical">
<Form.Item label="姓名">
<Input
value={newStudentValue.name}//初始值
onChange={(e) => this.setState({ newStudentValue: { ...newStudentValue, name: e.target.value } })}// 输入框值 ...newStudentValue指的是当前学生的值
placeholder="输入姓名"
/>
</Form.Item>
<Form.Item label="性别">
<Radio.Group
onChange={(e) => this.setState({ newStudentValue: { ...newStudentValue, gender: e.target.value } })}
value={newStudentValue.gender}
>
<Radio value="男">男</Radio>
<Radio value="女">女</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="学号">
<Input
value={newStudentValue.studentId}
onChange={(e) => this.setState({ newStudentValue: { ...newStudentValue, studentId: e.target.value } })}
placeholder="输入学号"
/>
</Form.Item>
<Form.Item label="家庭住址">
<Input
value={newStudentValue.address}
onChange={(e) => this.setState({ newStudentValue: { ...newStudentValue, address: e.target.value } })}
placeholder="输入家庭住址"
/>
</Form.Item>
</Form>
</Modal>
</div>
);
}
}
export default Page1;
浙公网安备 33010602011771号