Javascript 如何更新父项'；在React中使用子组件的状态的组件？

我有3个组件

在ListCard.js中，我映射了cards数组，并基于用户单击的卡片，调用handleChangeCardData来更新模式的文本

我的问题是：当我的handleChangeCardData函数位于ListCard.js内，并且我的模态处于同一级别时，如何更新/更改模态的文本。（两者都在Board.js中）

Board.js

const [cardTitle, setCardTitle] = useState("");
return (
     {columns.map((column, index) => (
            <div className="column__container" key={index}>
              <div className="column__header">
                <div className="columnHeader__name">
                  <p>{column.name ? column.name : "..."}</p>
                </div>
                <div className="columnHeader__button">
                  <button
                    className="btn btn-sm --create-card-btn"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-card"
                    onClick={() => setColumnId(column.id)}
                  >
                    New item
                  </button>
                </div>
              </div>
              <Droppable droppableId={column.id}>
                {(provided, snapshot) => (
                  <div
                    className="column"
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                  >
                    <ListCard columnId={column.id} />
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </div>
          ))}
    <ViewCardModal cardTitle={cardTitle} />
)

const[cardTitle，setCardTitle]=useState（“”）；
返回(
{columns.map（（列，索引）=>(
{column.name？column.name:“…”}

setColumnId（column.id）}
>
新项目
{（已提供，快照）=>(
{提供的.占位符}
)}
))}
)

LisCard.js

const handleChangeCardData = (cardTitle) => {
    setCardTitle(cardTitle);
  }

return (
{cards.map((card, index) => (
        <>
        <div key={index}>
          <Draggable draggableId={card.id} index={index}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                <div
                  className="card --listcard-card"
                  onClick={() => handleChangeCardData(card.title)}
                  data-bs-toggle="modal"
                  data-bs-target="#modal-card-details"
                  style={{ border: `2px solid ${card.color}` }}
                >
                  <div className="card-body">
                    <p>{card.title}</p>
                  </div>
                </div>
              </div>
            )}
          </Draggable>
        </div>
        </>
      ))}
)

constHandleChangeCardData=（cardTitle）=>{
setCardTitle（cardTitle）；
}
返回(
{cards.map（（卡片，索引）=>(
{（已提供，快照）=>(
handleChangeCardData（card.title）}
数据bs toggle=“模态”
数据bs target=“#模态卡详细信息”
style={{border:`2px solid${card.color}`}
>
{card.title}

)}
))}
)

ViewCardModal.js

function ViewCardModal(props) {
    return (
        <div>{props.cardTitle}</div>
    )
}

功能视图卡模式（道具）{
返回(
{props.cardTitle}
)
}

你不能直接这么做，但必须使用道具

在列表中：

onClick={() => props.onClick(card.title)}

董事会成员：

 handleChangeCardData = (cardTitle) => {
    setCardTitle(cardTitle);
  }

<ListCard columnId={column.id}  onClick={(e)=>handleChangeCardData(e)}/>

handleChangeCardData=（cardTitle）=>{
setCardTitle（cardTitle）；
}
handleChangeCardData（e）}/>

一般来说。在这种情况下，这听起来好像意味着将状态移动到

线路板

，然后将该状态传递给需要它的任何子组件（作为道具），并将状态设置器传递给需要它的任何（其他）子组件

这里有一个提升状态的最小示例。我没有试图重现您示例的全部复杂性，只是提供了一个

Parent

具有

ChildA

使用和

ChildB

设置的状态的示例：

const{useState}=React；
const ChildA=React.memo（{counter}）=>{
console.log（“ChildA呈现”）；
返回计数器={Counter}；
});
const ChildB=React.memo（{setCounter}）=>{
console.log（“ChildB呈现”）；
返回setCounter（c=>c+1）}
/>;
});
常量父项=（）=>{
const[counter，setCounter]=useState（0）；
返回(
);
};
render（，document.getElementById（“根”））

列表卡内部：

const ListCard = ({setCardTitle}) => {...}

onClick={() => setCardTitle(card.title)}

在父项中：

<ListCard columnId={column.id}  setCardTitle={setCardTitle} />

TypeError:props.onClick不是函数