H5W3
当前位置:H5W3 > 问答 > 正文

react 无状态组件,子组件如何修改父组件传过来的值

react无状态组件 无state

父组件调用 子组件弹窗

const [editVisible, setEdit] = useState(false);
//修改
const edit = (i) => {
setEdit(true)
}
<Button onClick={() => edit(i)}>修改</Button>
<Edit ishow={editVisible}></Edit>

子组件 想要在自身的组件里面修改这状态 关闭本身 应该如何修改

export default function Edit(prop) {
console.log(prop.ishow)
//声明form
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const [sortVisible, setSort] = useState(false);
const [editVisible, setEdit] = useState(false);
const [exam, setExam] = useState([]);
const [name, setName] = useState("");
useEffect(() => {
console.log(123);
}, [])
return (
<div>
{/* 修改*/}
<Modal
title="修改"
visible={prop.ishow}
okText="确认"
cancelText="取消"
onOk={() => { 这里应该怎么写 }}
onCancel={() => { 这里应该怎么关闭; form.resetFields(); }}
>
<Form form={form}>
<Form.Item
label="考试名称"
name="name"
rules={[
{
required: true,
message: '请输入考试名称',
},
]}
>
<Input onChange={(e) => { setName(e.target.value) }} />
</Form.Item>
</Form>
</Modal>
</div>
);
}

现在只能打开 但是无法关闭 因为不知道在子组件里面如何修改这个prop.ishow

回答

setEdit也传给子组件调用嗯

子组件要调用父组件的方法~

子组件执行父组件通过props传过来的callback通知父组件去修改值
即使是在vue里也请不要直接修改父组件传过来的值,很反模式,增加理解成本,减少可维护性

本文地址:H5W3 » react 无状态组件,子组件如何修改父组件传过来的值

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址