React 组件上的 onChange 不会更改其父级内部的状态

Question

因此，我创建了一个文本输入组件，并将其导入到另一个组件。 这给了它一个支柱，并说状态值应设置为e.target.value。 但是我认为这不起作用。

这是我

function Input() {
  return (
    <input type="text"  />
  )
}


export default Input

---

在这里进口的事情，然后将Onchange放置

 function RepositoryList() {
    const[repositories, setRepositories] = useState([]);
    const[search, setSearch]=useState('')

  

    const url = "https://api.adresss";
    useEffect(()=> {
        fetch(url)
        .then((response)=> response.json())
        .then(data => setRepositories(data))
    },[repositories])

  return (
     <>
     <ul>

     <Input onChange={(e)=>{setSearch(e.target.value)}}/>

     {repositories
     .filter((repos) =>  repos.name.includes(search) )
     .map(repository => {
         return <RepositoryItem key={repository.name} repo={repository}/>
     })}
    </ul>
    
    </> 
  )
}

export default RepositoryList

Answer 1

将 onChange 回调传递给输入

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


export default Input