react将函数作为参数传递然后回调

最新推荐文章于 2024-05-08 16:00:54 发布
最新推荐文章于 2024-05-08 16:00:54 发布
阅读量2k 收藏
点赞数
分类专栏： 工作学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyeqianhen/article/details/106481333
版权

父组件

import React, { Component } from 'react';
import DailyTrainyLeft from './DailyTrainLeft';
import DailyTrainRight from './DailyTrainRight';


/**
 * 日常训练模块
 */
export default class DailyTrain extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeKey: ''
    };
  }

  componentDidMount(){
    //右侧窗口默认显示第一个数据查询的列表
    this.list && this.list.onRequestTable((list) => this.onEditClick(list[0]))
  }

  onEditClick = (record) => {
    this.listTwo.onEdit(record.key)
  }



  render() {
    return (
      <div className="dailyTrain-safety">
         <div className="dailyTrain-safty-content">
             <div className="dailyTrain-top"></div>
             <div className="dailyTrain-bottom">
                 <DailyTrainyLeft ref={node => this.list = node} onEditClick={this.onEditClick}/>
                 <DailyTrainRight ref={node => this.listTwo = node}/>
             </div>
         </div>
      </div>
    );
  }
}

子组件

import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';

const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';

import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    width: '10%',
    align: 'center',    // 设置文本居中的属性
    render: val => <span style={{color:"white"}}>{val}</span>,
    
  },
  {
    title: '换流站名称',
    width: '20%',
    dataIndex: 'name',
    render: val => <span style={{color:"yellow"}}>{val}</span>,
  },
  {
    title: '科目数',
    width: '10%',
    dataIndex: 'kemu',
    render: val => <span style={{color:"white"}}>{val}</span>,
  },
  {
    title: '次数',
    width: '10%',
    dataIndex: 'cishu',
    render: val => <span style={{color:"white"}}>{val}</span>,
  },
  {
    title: '参加人员',
    width: '10%',
    dataIndex: 'cjry',
    render: val => <span style={{color:"white"}}>{val}</span>,
  },
  {
    title: '人员达标率',
    width: '20%',
    dataIndex: 'rydbl',
    render: val => <span style={{color:"white"}}>{val}</span>,
  },
  {
    title: '最近培训时间',
    width: '20%',
    dataIndex: 'date',
    render: val => <span style={{color:"white"}}>{val}</span>,
  }
];
const data = [
  {
    key: '1',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '2',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '3',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '4',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '5',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '6',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '7',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '8',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '9',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '10',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '11',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '12',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '13',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '14',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '15',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '16',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '17',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '18',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '19',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '20',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '21',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '22',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '23',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '225',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '25',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '26',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '27',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '28',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  },
  {
    key: '29',
    name: '复龙换流站',
    kemu: 3,
    cishu:4,
    cjry: 5,
    rydbl:'50%',
    date:"2019-01-01"
  }
];

const selectdata = [
  
  { id: 0, name: '消防理论知识培训' },

  { id: 1, name: '消防技能培训' },

  { id: 3, name: '设备器材维护管理' },

  { id: 4, name: '火灾隐患管理' },

  { id: 5, name: '用火用电管理' }

];

//偏移
const offsetHeight = 110;
const defaultHeight = 450;

/**
 * 日常训练左侧
 */
class DailyTrainyLeft extends Component {

  constructor(props) {
    super(props);
    this.pageConfig = {
      current: 1,
      pageSize: 14
    };
    this.state = {
      data: [],
      loading: false,
      equimentId:null,
      pagination: true,
      isChecked: false,
      selectedRows: [],
      selectedRowKeys: [],
      dataList: [],
      newDataList:[],
      totalCount:0,
      searchParam:'',
      fname:'',
      current: 1,
      pageSize: 10,
      total: 0,
      tableHeight:450
    };
  }

  componentDidMount() {
     
  }

  onRequestTable = (callback) => {
    
    this.setState({
      data:data,
      totalCount:data.length
    });
    callback && callback(data);

    // electricFireListAction(current, pageSize, searchName).then(d => {
    //   const { dataList, total } = d || {};
      
      
    // });
  }

  onChange = (value, item) =>{
    console.log(value, item);
  
  }

   onTimeChange= (value, dateString)=> {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  }
  
   onOk=(value) =>{
    console.log('onOk: ', value);
  }

  onChangeSelect = (value, item) =>{

    console.log(value, item);
  
  }
  
  
  


  reload = r => {
    this.setState(
      {
        reload: () => {
          r();
          this.setState({ selectedRows: [], selectedRowKeys: [] });
        }
      },
      r()
    );
  };


  getAcitonData = () =>{
        this.setState({
          data:data
        })
  }

  /**
   * 分页设置参数
   */
  setPageConfig = ({ pageSize, current }) => {
    if (pageSize !== undefined) {
      this.pageConfig.pageSize = pageSize;
    }
    if (current !== undefined) {
      this.pageConfig.pageNumber = current;
    }
  };
    /**
   * 获取表格所选则的行数据
   */
  getSelectedRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
    let { riskSourceId, equipmentId, callBack } = this.props;
    // callBack(selectedRowKeys,riskSourceId,equipmentId);
  };

  searchData =()=>{
   let name = this.state.fname;
   alert(name)
  }

  onChange = (e,value) =>{
  
    this.setState({ fname: value });
  }

  getPanelHeight = () => {
  
    //计算表格高度
    var box1=document.getElementById("dailyTrain-bottom-left");
    if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
          return  box1.offsetHeight * 0.91
       
    }
  };

  SearchChange = (value) => {
    alert(value)
}


rowClassName = (record, index) => {
  let className = index % 2 ? 'back-01': 'back-02';
  return className
}


  render() {
    let defaultPageConfig = this.pageConfig;
    const { current, pageSize, total } = this.state;
     const {onEditClick} =this.props;
    let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state;
    return (
      <div className="dailyTrain-bottom-left" id="dailyTrain-bottom-left">
        <div className="dailyTrain-bottom-left-content">
            <div className="one-div" id="one-div">
                <div className="search-one">
                   {/* <div className="search-one-button" onClick={this.searchData} /> */}
                   <div className="search-one-input">
                      <Search   placeholder="搜索" onSearch={this.SearchChange} />
                   </div>
                   
                  
                </div>
                <div className="search-two" >
                
                  
                  <Select className="search-select-style"
                   data={selectdata}
                   renderOption={item => <Option value={item.id}>{item.name}</Option>}
                   defaultOption={<Option>请选择</Option>}
                   onChange={this.onChangeSelect}
                   />

                
                
                </div>
                <div className="search-three">
                <span className="three-font">日期:&nbsp;&nbsp;</span>
                  <DatePicker 
                   placeholder="年-月-日"
                   showTime 
                   onChange={this.onTimeChange} 
                   style={{width:'37%'}}
                   onOk={this.onOk} />
                  
                  {/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
                  &nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
                  <DatePicker 
                   placeholder="年-月-日"
                   showTime 
                   onChange={this.onTimeChange} 
                   style={{width:'37%'}}
                   onOk={this.onOk} />
                </div>
            </div>
            <div className="two-div">

            

              
                <AmosGridTable
                  columns={columns}
                  dataList={data}
                  isPageable={pagination}
                  totals={totalCount}
                  callBack={this.reload}
                  selectedRowKeys={selectedRowKeys}
                  getSelectedRows={this.getSelectedRows}
                  getTableDataAction={this.getAcitonData}
                  isChecked={isChecked}
                  setPageConfig={this.setPageConfig}
                  defaultPageConfig={defaultPageConfig}
                  getPanelHeight={this.getPanelHeight}
                  rowClassName={this.rowClassName}
                  onRowClick={(record) => onEditClick(record)}
                />
                        
                  
             
                  
            </div>
        </div>
        
      
      </div>
    );
  }
}


DailyTrainyLeft.propTypes = {

};

export default DailyTrainyLeft;

 

雨夜浅痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 事件处理
12-13
或者，在事件处理器中直接使用箭头函数，但需要注意的是，这种方法会导致每次组件渲染时创建新的回调函数，可能影响性能，尤其是在向低阶组件传递回调时： ```jsx class LoggingButton extends React.Component { ...
React 组件 API
12-14
`setState`接受一个可选的回调函数，这个回调会在状态更新并且组件完成重绘之后被调用。需要注意的是，`setState`是异步的，这意味着它不会立即改变`this.state`，而是安排更新并在适当的时候执行。 2. **替换状态...
React Native之函数作为参数传递给另外一个函数去调用
码莎拉蒂
11-01 4961
1 用法 我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针 2 代码测试 写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数 /** * Sample React Native App * https://github.com/facebook/react-native * * @forma...
当前端Vue3为插槽添加单击事件但会立即执行的代码错误
最新发布
m0_65037354的博客
05-08 336
在 `getTableAction` 方法中，通过使用箭头函数 `() => this.yulan(record)` 和 `() => this.xiazai(record)`，确保点击事件时调用相应的函数，而不是立即执行。- 在 Vue 组件中，使用 `this.yulan(record)` 和 `this.xiazai(record)` 来调用组件实例中定义的 `yulan` 和 `xiazai` 方法。- 确保 `record` 对象能够正确传递给相应的方法，以便在处理点击事件时使用。
reactjs生命周期回调(钩子)函数：componentDidMount componentWillUnmount
学亮编程手记
02-02 618
会产生递归调用render问题：
React框架子组件向父组件传表单参数，使用回调函数
zjq_1234的博客
07-08 1393
运用场景：在开发点击+号，新增一个表单，点击减号删除一个表单，点击保存时提交当前页面的多个表单的数据，这时候，在父组件要用到search公共组件中的表单数据，传参格式为[{},{},{}]。 思路：点击+号，新增一个表单，这个时候要给表单一个key，当有多个表单的时候，可以区分每个表单的数据。使用react中的表单的ref进行表单数据的传递。 前情提要：search为一个公共组件，表单的产生在该组件内。 第一步：在公共的search组件中，添加ref方法。 <Form style={.
React 回调函数传默认值和自定义参数
JasonAlonk的博客
12-16 1018
// 利用监听函数 e为默认参数 arg为自定义参数 onTouchStart={e => this.touchS(e, arg)}
基于react组件之间的参数传递(详解)
08-29
在 React 中，子组件也可以通过回调函数将参数传递给父组件。我们可以在父组件中定义一个回调函数，然后将其传递给子组件。在子组件中，我们可以使用这个回调函数来传递参数。 例如，在父组件中，我们可以定义一个...
关于react中组件通信的几种方式详解
01-19
刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦，下面这篇文章就来给大家详细介绍下，在开始之前先来看一张图： react组件通信 需要组件之进行通信的几种情况 父组件向子组件通信 子组件...
use-conditional-effect:React.useEffect，除了可以传递比较函数
03-15
问题React的内置useEffect挂钩具有第二个参数，称为“依赖项数组”，它使您能够确定React何时调用效果回调。 React将在每个值之间进行比较（使用Object.is ，类似于=== ），以确定是否应调用效果回调。 依赖项数组...
React事件处理的方式/绑定this的5种方式/事件回调函数传递参数
祥哥的说
01-25 1880
一、在React元素绑定事件要注意的三点 1、React中事件的命名采用驼峰命名法，而不是原生dom中的小写。 如：onclick要写成onClick,onchange要写成onChange 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是以dom字符串的形式 在dom中： <button οnclick=“clickMe()”>不服点我</button> React中: <button onClick={clickButton}>不服点我&l
react的传值
Mr_HaoNan的博客
04-12 1471
React组件间的通信分为三种情况： 1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用； 2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用； 3、使用全局事件 Pub/Sub 模式，在 componentDidMount
React Navigation 跳转页面时回调
卓原的进化之旅
08-10 1649
跳转页面时，传递参数，把回调方法作为参数传递进去。 onPress={() =&gt; this.props.navigation.navigate('cameraID', { onBack: (imgUri) =&gt; { this.setState({kt...
react事件对象属性显示null
javscp_q的博客
03-30 1320
最近开始做react项目了 获取事件对象，运行都正常，获取数据也正常，但想看里面的各个细节时，展开全是null 查阅资料发现react返回的是一个合成对象，在事件响应函数被调用后，所有的属性都会无效，所以在响应函数中获取数据没问题，但在浏览器中查看时或进行异步操作时，响应函数早执行完了，所以属性全是null 此时需要使用event.persist()，此方法会从池中移除合成事件，保留对事件的引用 但官方文档说v17以后event.persist()不再生效，因为合成事件对象不再放入事件池中，
手把手教你从零到有学会React组件通讯
CSDN凉宸
05-25 529
组件通讯介绍 组件是独立且封闭的单元，默认只能使用组件自己的数据，在组件化过程中，我们将一个完整的功能拆分为多个组件，以便于更好的完成整个应用的功能。在这个过程中，多个组件之间不可避免的要使用共享一些数据，实现这些功能，我们就需要打破组件的独立封闭性，让其与外界进行沟通，这个过程就算组件通讯 组件的props 组件是封闭性的，要接收外部传来的数据就要通过props实现 props作用：接收传递给组件的数据 传递数据：给组件标签添加自定义属性 <Title name="Tom" age={19}
React function传递参数
qq_45623378的博客
12-11 1218
react function 传递参数
React传递参数的多种方式
hold_fish_palm的博客
07-26 1594
最常见的就是父子组件之间传递参数 父组件往子组件传值，直接用this.props就可以实现 在父组件中，给需要传递数据的子组件添加一个自定义属性，在子组件中通过this.props就可以获取到父组件传递过去的数据 // 父组件 render() { return ( // 使用自定义属性传递需要传递的方法或者参数 <ShopUi toson={this.state}></ShopUi>
react hooks中为useState添加回调函数（自定义hooks）
一枚不断学习的小码农一枚~
11-23 4851
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
react回调函数
06-01
React 中的回调函数通常是指将一个函数作为参数传递给子组件，以便子组件可以将一些数据或事件传递回父组件。这种传递函数的方式可以通过 props 来实现。 例如，一个父组件可以定义一个回调函数来处理子组件的点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值