reactjs - React 和 TypeScript 如何通过道具在 onClick 上将数据从子级传递给父级

Question

我有父子组件。而且我不想通过道具在 onClick 上将子组件数据传递给父组件。我怎样才能做到这一点？我试过了：

父.tsx

const items = [
  {
    title: "A"
  },
  {
    title: "B"
  }
]

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e: React.MouseEvent, title: string) => {
     setSomeState(title);
   }

   return (
     <Child items={items} toggleState={(e) => toggleState(e, item.title)} />
   )
}

孩子.tsx

type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent) => void;
}

const Child: React.FC<ChildProps> = (props) => {
   return (
    {props.items.map((item) => (
       <button onClick={props.toggleState}> pass clicked item title to parent </button>
    ))}
   )
}

但在我的父组件omn toggleState prop item.title 中显示错误：

任何找不到名称“项目”。

标签： reactjstypescript

Answer 1

与任何其他函数调用一样，您必须将信息作为参数传递：

Parent.tsx：

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e: React.MouseEvent, title: string) => {
     setSomeState(title);
   }

   return (
     <Child toggleState={(e, title) => toggleState(e, title)} items={items}/>
   )
   // −−−−−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−−−−^^^^^
}

Child.tsx：

type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent, title: string) => void;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

const Child: React.FC<ChildProps> = (props) => {
   return (
    {props.items.map((item) => (
       <button onClick={(e) => props.toggleState(e, item.title)}> pass clicked item title to parent </button>
    ))}
   )
   // −−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

注意toggleStateinParent.tsx和onClickin的变化Child.tsx。

现场示例：

const { useState } = React;

/*
interface Item {
  title: string;
}
*/
const items = [
    {title: "Item 1"},
    {title: "Item 2"},
    {title: "Item 3"},
    {title: "Item 4"},
];

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e/*: React.MouseEvent*/, title/*: string*/) => {
     setSomeState(title);
   }

   return (
     <div>
       <div>someState = {someState}</div>
       <Child items={items} toggleState={(e, title) => toggleState(e, title)} />
     </div>
   )
   // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−−−−^^^^^
}

/*
type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent, title: string) => void;
}
*/

const Child/*: React.FC<ChildProps>*/ = (props) => {
   return <React.Fragment>
    {props.items.map((item) => (
       <button onClick={(e) => props.toggleState(e, item.title)}> pass clicked item title to parent </button>
    ))}
   </React.Fragment>
   // −−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

在操场上展示类型的工作。