react 入坑学习（八）Hooks React 父组件向子组件传值 react hooks子给父传值

桂芝堂

https://blog.csdn.net/qq_40044912/article/details/107812704

 

react hooks子给父传值

https://blog.csdn.net/zyj12138/article/details/107468389

 

 

  
子组件：

import { useState, useContext } from 'react';
import { FatherContext } from './index';
import { Form, Input, Select } from 'antd';
const { Option } = Select;
const FormLayoutDemo = props => {
  // 子像父传值
  const { setshowcode, setshowshuo, setshowhand } = props;
  // 获取父组件转递的值
  const baseval = useContext(FatherContext);
  return (
    <div>
      <Form layout="horizontal">
        <Form.Item label="是否缓存" hasFeedback>
          <Select
            placeholder={baseval.is_cache === '1' ? '缓存' : '不缓存'}
            onBlur={e => setshowhand(e)}
          >
            <Option value="1">缓存</Option>
            <Option value="0">不缓存</Option>
          </Select>
        </Form.Item>
        <Form.Item label="说明">
          <Input placeholder={baseval.memo} onChange={e => setshowshuo(e.target.value)} />
        </Form.Item>
        <Form.Item label="值">
          <Input placeholder={baseval.code} onChange={e => setshowcode(e.target.value)} />
        </Form.Item>
      </Form>
    </div>
  );
};

export default FormLayoutDemo;

　　父组件

import { useState, createContext, useRef } from 'react';
import { getbasesall, uptadebasesall } from '@/services/basecode';
import ProTable from '@ant-design/pro-table';
import { Modal, message } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import styles from './style.less';
// 引入表单
import Baseform from './baseFormbiao';
import Constants from '@/constans';
export const FatherContext = createContext();
const newpage = props => {
  const [visible, setVisible] = useState(false);
  const [code, setCode] = useState('');
  const [memo, setMemo] = useState('');
  const [is_cache, setIs_cache] = useState('');
  const [id, setId] = useState('');
  const [gochuancan, setGochuancan] = useState('');
  // 修改
  const handleUpdateRow = (text, record) => {
    console.log(record);
    console.log(text);
    // 将值存储
    sessionStorage.setItem('textcodefig', JSON.stringify(text));
    setVisible(true);
    setId(record);
    setGochuancan(JSON.parse(sessionStorage.getItem('textcodefig')));
  };
  const handleOk = e => {
    sessionStorage.removeItem('textcodefig');
    let currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
    // console.log(currentUser);
    if (currentUser) {
      const { hotel_group_id, hotel_id, create_user, modify_user } = currentUser;
      // 判断所输入的 不为空
      let star = code.replace(/(^\s*)|(\s*$)/g, '');
      let mstart = memo.replace(/(^\s*)|(\s*$)/g, '');
      if (star === '' || star === undefined || star === null) {
        message.error('不能输入为空、空格');
        // 清空输入框的值
        setCode('');
        return;
      }
      if (mstart === '' || mstart === undefined || mstart === null) {
        message.error('不能输入为空、空格');
        // 清空输入框的值
        setMemo('');
        return;
      }
      // 发起请求更新
      let data = {
        code,
        create_user,
        description: '',
        hotel_group_id,
        hotel_id,
        id,
        is_cache,
        modify_user,
        memo,
      };
      uptadebasesall(data).then(rsp => {
        console.log(rsp);
        if (rsp && rsp.code == Constants.SUCCESS) {
          message.success(rsp.message || '修改成功');
          // 更新列表后退出模态框
          // window.location.reload();
          actionRef.current.reload();
        }
      });
      setVisible(false);
    }
  };

  const handleCancel = e => {
    sessionStorage.removeItem('textcodefig');
    setVisible(false);
  };

  const [columns] = useState([
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'description',
      width: 200,
      key: 'description',
    },
    {
      title: '值',
      key: 'code',
      dataIndex: 'code',
    },
    {
      title: '是否缓存',
      dataIndex: 'is_cache',
      valueEnum: {
        '1': {
          text: '缓存',
        },
        '0': {
          text: '不缓存',
        },
      },
    },
    {
      title: '是否有效',
      dataIndex: 'valid',
      valueEnum: {
        '1': {
          text: '有效',
        },
        '0': {
          text: '无效',
        },
      },
    },
    {
      title: '说明',
      key: 'memo',
      dataIndex: 'memo',
    },
    {
      title: '操作',
      valueType: 'option',
      dataIndex: 'id',
      render: (text, record) => {
        return (
          <span>
            <a onClick={e => handleUpdateRow(record, text)}>修改</a>
          </span>
        );
      },
    },
  ]);
  const actionRef = useRef();
  return (
    <GridContent>
      <>
        <ProTable
          actionRef={actionRef}
          className={styles.myTabs}
          columns={columns}
          rowKey="id"
          request={params => getbasesall(params)}
        />
        {/* 显示对话框 */}
        <Modal title="基础配置" visible={visible} onOk={handleOk} onCancel={handleCancel}>
          {/* 关键代码 */}
          {/* 提供器 */}
          <FatherContext.Provider value={gochuancan}>
            <Baseform setshowcode={setCode} setshowshuo={setMemo} setshowhand={setIs_cache} />
          </FatherContext.Provider>
        </Modal>
      </>
    </GridContent>
  );
};

export default newpage;

　　

苦心人，天不负

来源：https://www.cnblogs.com/taxun/p/13497727.html