Question

我有父母和孩子组成部分。而且我不会通过prop在onClick中将子组件数据传递给父组件数据。我怎样才能做到这一点？我尝试过：

Parent.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)} />
   )
}

Child.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 道具 item.title 中显示错误：

任何找不到名称“ item”。

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>
    ))}
   )
   // −−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

请注意toggleState中Parent.tsx和onClick中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>

On the playground来显示类型。

React＆TypeScript如何通过prop在onClick上将数据从子级传递到父级

1 个答案: