React
小丸子yeah~
这个作者很懒,什么都没留下…
展开
-
子组件ref传值给父组件
一.子组件为函数组件 用ref转发函数子组件:const ConfigRule = React.forwardRef(({ getFieldDecorator, initValue, selectValue }, ref) => {useImperativeHandle(ref, () => ({ value: [...dataSource], selectedValue: { server, dataBase, }, }));}e原创 2021-10-20 17:49:34 · 776 阅读 · 0 评论 -
form表单自定义验证规则
// 自定义检验规则,(注意,callback 必须被调用)// 校验中文名称 checkFieldName = (_rule, value, callback) => { if (value && value.length > 50) { callback('文本长度过长'); } else if (/\s/.test(value)) { callback('请删除空格'); } else callback(); }原创 2021-10-20 13:25:52 · 1151 阅读 · 0 评论 -
react 使用xlsx导出excel表格
import XLSX from 'xlsx'; // 引入exportExcel = async () => { let exportData = []; // selectedRowKeys为勾选数据,根据selectedRowKeys筛选需要导出的数据 await this.requestChooseAllData({ limit: -1 }); exportData = this.state.chooseAllDataSource; const newData原创 2021-10-20 11:34:17 · 1137 阅读 · 0 评论 -
Ant Design中select如何赋初值,并且展示的是对应的文本内容
之前遇到的问题:select初始值一开始展示的是数字1,1即表示正常,无法展示它实际对应的内容,原因是这个1和option中的key的值无法对应,因为key中的item.EnumerateCode为字符串的形式,把这个1改成字符串的类型就好了。const temp = data.dictTableInfo;temp.table_status += '';// 把这个值改成字符串的形式this.props.form.setFieldsValue({ table_info: temp });get原创 2021-08-18 13:30:50 · 1007 阅读 · 0 评论 -
AntV G6 新增/修改/删除节点 从页面操作
//新增if (this.state.isAdd) { this.state.contorlGraph.addChild(this.state.addData, this.state.fatherId);} else { //修改 // this.state.contorlGraph.updateChild(this.state.addData, this.state.fatherId);这个api似乎不管用 if (this.state.fixID !== value.Enumerate原创 2021-08-04 11:29:37 · 5026 阅读 · 1 评论 -
AntV-G6 记录折叠节点,数据更后节点保持之前的折叠状态
首先,在进行折叠操作的时候就用数组记录下被折叠的节点,因为setState函数只要改变了状态(节点展开和折叠)就会执行,所以在数据更新后渲染历史节点状态时也会执行,要注意 不要重复pushsetState(name, value, item) { let flag = false; // 用来判断是否是历史数据用来初始化的,如果是历史数据就不push进数组 if (name === 'collapsed') { if (value === true) {原创 2021-08-02 13:31:24 · 3105 阅读 · 0 评论 -
React 实现table内单元格可编辑
Ant Design中给出了实现的办法,但个人觉得有点略微复杂,且在函数组件中似乎还要改写这部分。所以自己实现了一下这个功能,用于函数组件中。示例:const ConfigRule = React.forwardRef(({ getFieldDecorator }, ref) => {const [dataSource, setDataSource] = useState([]);const columns = [ { title: '序号', dataInd原创 2021-06-25 13:45:10 · 2327 阅读 · 7 评论 -
用react遇到的问题
1.元素上关于事件的定义,{}里面要注意写的是方法fn,而不是方法的执行fn()<Icon type="plus-circle" style={{ fontSize: 20, marginLeft: 20 }} onClick={this.addField} /><Icon type="minus-circle" style={{ fontSize: 20, marginLeft: 20 }} onClick={this.removeField.bind(this, item.key)原创 2021-04-23 18:24:06 · 99 阅读 · 0 评论 -
react父子组件间传值
父组件获取子组件中的方法: Child = React.createRef();//取到子组件的ref<ProRequestTable ref={this.Child} //子组件设置ref url={this.state.nodeCode ? `/v1/dtgather/configuration/get-check-info-list?node_code=${this.state.nodeCode}`原创 2021-04-21 10:25:42 · 76 阅读 · 0 评论 -
Hook
关于Reffunction TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` 指向已挂载到 DOM 上的文本输入元素 inputEl.current.focus(); console.log(inputEl); //{current:input} console.log(inputEl.current);.原创 2021-04-14 16:21:19 · 70 阅读 · 0 评论