為什么將事件處理程序傳遞給子組件不起作用

Question

我正在嘗試將事件處理程序傳遞給父組件，所以我編寫了這段代碼：

 import React, { useState } from "react"; export default function App() { const [val, setVal] = useState(""); function handleChange(event) { console.log(event.target); setVal(event.target.value); } return ( <div className="App"> <TextInput onChange={handleChange} /> <div>{val}</div> </div> ); } function TextInput(props) { return <input onChange={props.handleChange} type="text" />; } const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, rootElement );

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

（我不知道為什么 stackoverflow 無法在上面的代碼中處理導出，我該如何讓它工作？這是 codesandbox -https://codesandbox.io/s/onchange-test-1pxdr?file=/src/index.js )

我希望在框中鍵入時，框下的文本應該更新，但什么也沒有發生，也沒有錯誤。 為什么是這樣？

Answer 1

你犯的錯誤很簡單。 傳遞道具的規則是你不能在子組件中使用你在父組件中給 function 的相同名稱訪問它。

您的 function 姓名：

function handleChange(event)

通過您作為道具傳入的名稱訪問它，在這種情況下是onChange而不是handleChange ：

<TextInput onChange={handleChange} />

您可以在子組件props.onChange上使用兩種方式：

 <input onChange={props.onChange} type="text" />

或者通過使用道具解構：

function TextInput({onChange}) {
 <input onChange={onChange} type="text" />
}

Answer 2

應該是onChange={props.onChange}

  function TextInput(props) {
      return <input onChange={props.onChange} type="text" />;
    }