react 入坑学习（八）Hooks React 父组件向子组件传值 react hooks子给父传值
<p>https://blog.csdn.net/qq_40044912/article/details/107812704</p><p> </p>
<h1 id="articleContentId" class="title-article">react hooks子给父传值</h1>
<p>https://blog.csdn.net/zyj12138/article/details/107468389</p>
<p> </p>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">
子组件：
import { useState, useContext } from 'react';
<span style="background-color: rgba(255, 153, 0, 1)">import { FatherContext } from './index';</span>
import { Form, Input, Select } from 'antd';
const { Option } = Select;
const FormLayoutDemo = props => {
<span style="background-color: rgba(255, 153, 0, 1)">// 子像父传值
const { setshowcode, setshowshuo, setshowhand } = props;
// 获取父组件转递的值
const baseval = useContext(FatherContext);</span>
return (
<div>
<Form layout="horizontal">
<Form.Item label="是否缓存" hasFeedback>
<Select
placeholder={baseval.is_cache === '1' ? '缓存' : '不缓存'}
<span style="background-color: rgba(255, 153, 0, 1)"> onBlur={e => setshowhand(e)}</span>
>
<Option value="1">缓存</Option>
<Option value="0">不缓存</Option>
</Select>
</Form.Item>
<Form.Item label="说明">
<span style="background-color: rgba(255, 153, 0, 1)"> <Input placeholder={baseval.memo} onChange={e => setshowshuo(e.target.value)} /></span>
</Form.Item>
<Form.Item label="值">
<span style="background-color: rgba(255, 153, 0, 1)"> <Input placeholder={baseval.code} onChange={e => setshowcode(e.target.value)} /></span>
</Form.Item>
</Form>
</div>
);
};
export default FormLayoutDemo;
</pre>
</div>
<p> 父组件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><span style="background-color: rgba(255, 153, 0, 1)">import { useState, createContext, useRef } from 'react';</span>
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';
// 引入表单
<span style="background-color: rgba(255, 153, 0, 1)">import Baseform from './baseFormbiao';</span>
import Constants from '@/constans';
<span style="background-color: rgba(255, 153, 0, 1)">export const FatherContext = createContext();</span>
const newpage = props => {
const = useState(false);
<span style="background-color: rgba(255, 153, 0, 1)"> const = useState('');
const = useState('');
const = useState('');</span>
const = useState('');
const = 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 = 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}>
{/* 关键代码 */}
<span style="background-color: rgba(255, 153, 0, 1)"> {/* 提供器 */}
<FatherContext.Provider value={gochuancan}>
<Baseform setshowcode={setCode} setshowshuo={setMemo} setshowhand={setIs_cache} />
</FatherContext.Provider></span>
</Modal>
</>
</GridContent>
);
};
export default newpage;
</pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
苦心人，天不负<br><br>
来源：https://www.cnblogs.com/taxun/p/13497727.html
頁:
[1]