反应 - onChange 事件和 function 不适用于导入的输入组件

Question

我有以下代码/组件。 导入的 Input 组件上的 onChange 事件不起作用，它不会被触发。 我在 web 上尝试了不同的解决方案，但它们不起作用。 但是，如果我尝试直接在 APP function 中渲染元素而不是导入外部组件，它可以工作。 我究竟做错了什么？ 谢谢。

• 输入组件

  import React from "react"; export default function Input(event) { return <input />; }

• 项目组件

  import React from 'react'; export default function Item({text}) { console.log({text}); return <li>{text}</li> }

• 应用程序.JS

import React, { useState } from "react";
import "./App.css";
import Input from "./input";
import Item from "./item";

function App() {
  const [text, setText] = useState();

  function handleChange(event){
    console.log(event.target.value);
    setText(event.target.value);
  }


  return (
    <div className="App">
      <h1>JSX will go here!</h1>
      <Input onChange={ event => handleChange(event)} />
      <Item text={text} />
    </div>
  );
}

export default App;

文件夹结构：

文件夹结构

Answer 1

你把它作为道具传递了。 项目组件应该是

 export default function Input(props) {
    return <input onChange={props.onChange}/>;
  }

Answer 2

来自React 文档

记得将 prop 传递给<input />元素

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />      
            <Welcome name="Edite" />    
        </div>
    );
}