Question

我的react项目包含两个组件：一个是父级，另一个是子级。我的父组件看起来像这样：

import React, {useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) =>{
const [show,setShow] = useState(false);
const toggle = () => setShow(!show);
return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <p>{show && <AddNewModal show={props.show} setShow={props.setShow}/>}</p>
    </div>
     )
}export default MouseContainer;

还有一个子组件，该子组件呈现如下模态：

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = (show,setShow) => {
return(
    <div>
    <Modal show={show} setShow={setShow}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={(props)=>props.setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}export default AddNewModal;

如何更新统计信息，以便在单击“取消”按钮时关闭模式？

Answer 1

如果我理解正确，那么您正在使用useState挂钩控制模式。如果是这样，那么您的问题就是要传递给AddNewModal组件的道具。

您正在使用以下方法正确创建挂钩：

const [show, setShow] = useState(false);

但是，您将错误的道具传递给AddNewModal组件。您正在通过setShow组件中的道具传递show和MouseContainer，在这里：

<p>{show && <AddNewModal show={props.show} setShow={props.setShow} />}</p>

但是，要使用该钩子，您应该传递声明的变量：

<p>{show && <AddNewModal show={show} setShow={setShow} />}</p>

我不熟悉引导框架，但是我认为模态组件的道具show正在控制是否显示模态。在这种情况下，您也可以删除条件渲染，结果是：

<AddNewModal show={show} setShow={setShow} />

这是MouseContainer组件的更新代码：

import React, { useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) => {
  const [show,setShow] = useState(false);
  const toggle = () => setShow(!show);

  return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <AddNewModal show={show} setShow={setShow} />
    </div>
  )
}

此外，您在AddNewModal上有一个小字体：

要立即在功能组件声明上获取所需的props字段，必须使用对象分解[1]，然后使用花括号：

const AddNewModal = ({ show, setShow }) => {

这样做，并不是像在props组件中那样声明MouseContainer对象。因此，您不能在函数中使用它。

您在这里更新了AddNewModal：

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({ show, setShow }) => {
  return (
    <div>
      <Modal show={show} setShow={setShow}> 
        <Modal.Header>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body><AddNewForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(!show)}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

来源：

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

我认为您几乎可以在那里进行以下更改

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({show,setShow}) => {
return(
    <div>
    <Modal show={show}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={()=>setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}

如何使用react hook将父组件中声明的状态更新为子组件

2 个答案: