Javascript 如何让子组件控制根组件中的react钩子

我有一个将GitHub用户添加到列表的应用程序。当我在表单中输入时，将返回一个用户并将其添加到列表中。我希望只有当用户在资源请求后出现时单击该用户时，才能将该用户添加到列表中。具体地说，我希望在子组件中有一个click事件触发根组件对钩子的触发，从而将新元素添加到列表中

根组件

const App = () => {
  const [cards, setCards] = useState([])

  const addNewCard = cardInfo => {
    console.log("addNewCard called ...")
    setCards([cardInfo, ...cards])
  }

  return (
    <div className="App">
      <Form onSubmit={addNewCard}/>
      <CardsList cards={cards} />
    </div>
  )
}

export default App;

const Form = props => {
    const [username, setUsername] = useState('');

    const chooseUser = (event) => {
        setUsername(event.target.value)
    } 

    const handleSubmit = event => {
        event.persist();
        console.log("FETCHING ...")
        fetch(`http://localhost:3666/api/users/${username}`, {
        })
        .then(checkStatus)
        .then(data => data.json())
        .then(resp => {
            console.log("RESULT: ", resp)
            props.onSubmit(resp)
            setUsername('')
        })
        .catch(err => console.log(err))
    }

    const checkStatus = response => {
        console.log(response.status)
        const status = response.status
        if (status >= 200 && status <= 399) return response
        else console.log("No results ...")
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Gitbub username"
                value={username}
                required
                onChange={chooseUser}
                onKeyUp={debounce(handleSubmit, 1000)}
            />
            <button type="submit">Add card</button>
        </form>
    )
}
export default Form;

// Card.js
...
const [selected, selectCard] = useState(false)
...

const-App=（）=>{
const[cards，setCards]=useState（[]）
const addNewCard=cardInfo=>{
log（“addNewCard调用…”）
设置卡片（[cardInfo，…卡片]）
}
返回(
)
}
导出默认应用程序；

表单组件

const App = () => {
  const [cards, setCards] = useState([])

  const addNewCard = cardInfo => {
    console.log("addNewCard called ...")
    setCards([cardInfo, ...cards])
  }

  return (
    <div className="App">
      <Form onSubmit={addNewCard}/>
      <CardsList cards={cards} />
    </div>
  )
}

export default App;

const Form = props => {
    const [username, setUsername] = useState('');

    const chooseUser = (event) => {
        setUsername(event.target.value)
    } 

    const handleSubmit = event => {
        event.persist();
        console.log("FETCHING ...")
        fetch(`http://localhost:3666/api/users/${username}`, {
        })
        .then(checkStatus)
        .then(data => data.json())
        .then(resp => {
            console.log("RESULT: ", resp)
            props.onSubmit(resp)
            setUsername('')
        })
        .catch(err => console.log(err))
    }

    const checkStatus = response => {
        console.log(response.status)
        const status = response.status
        if (status >= 200 && status <= 399) return response
        else console.log("No results ...")
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Gitbub username"
                value={username}
                required
                onChange={chooseUser}
                onKeyUp={debounce(handleSubmit, 1000)}
            />
            <button type="submit">Add card</button>
        </form>
    )
}
export default Form;

// Card.js
...
const [selected, selectCard] = useState(false)
...

const Form=props=>{
const[username，setUsername]=useState（“”）；
常量选择器=（事件）=>{
setUsername（event.target.value）
} 
const handleSubmit=事件=>{
event.persist（）；
日志（“获取…”）
取回(`http://localhost:3666/api/users/${username}`{
})
.然后（检查状态）
.then（data=>data.json（））
。然后（resp=>{
日志（“结果：”，resp）
提交道具（分别）
setUsername（“”）
})
.catch（err=>console.log（err））
}
const checkStatus=响应=>{
console.log（response.status）
const status=response.status
如果（状态>=200&&status）{
返回(
{props.cards.map（card=>(
))}
)
}
导出默认卡片列表

和卡片组件

const Card = props => {

    const [selected, selectCard] = useState(false)

    return (
        <div style={{margin: '1em'}}>
            <img alt="avatar" src={props.avatar_url} style={{width: '70px'}} />
            <div>
                <div style={{fontWeight: 'bold'}}><a href={props.html_url}>{props.name}</a></div>
                <div>{props.blog}</div>
            </div>

        </div>
    )
}

export default Card 

const Card=props=>{
const[selected，selectCard]=使用状态（false）
返回(
{props.blog}
)
}
导出默认卡

现在，我的表单组件拥有所有控制权。我如何才能将应用程序中的

addNewCard

方法的控制权授予Card子组件

---

提前感谢一百万。

一个解决方案可能是在应用程序中创建一个removeCard方法，如果您想要控制的点击事件没有发生，就会触发该方法

// App.js
...
const removeCard = username => {
    console.log("Tried to remove card ....", username)
    setCards([...cards.filter(card => card.name != username)])
  }

然后将removeCard和addNewCard都传递到CardList

// App.js
...
  <CardsList remove={removeCard} cards={cards} add={addNewCard}/>

并将事件配置为触发挂钩并使用状态

// Card.js
...

    return (
        <div style={{margin: '1em', opacity: selected ? '1' : '0.5'}}
            onMouseLeave={() => selected ? null : props.remove(props.name)}
            onClick={() => selectCard(true)}
        >
...

//Card.js
...
返回(
选中？null:props.remove（props.name）}
onClick={（）=>selectCard（true）}
>
...

---

这实际上并没有将

addNewCard

的控制权从一张表单转移到另一张卡片，但它最终会强制UI遵循卡片组件的状态。

一个解决方案可能是在应用程序中创建一个removeCard方法，如果您想要控制

addNewCard

的单击事件没有发生，则会触发该方法

// App.js
...
const removeCard = username => {
    console.log("Tried to remove card ....", username)
    setCards([...cards.filter(card => card.name != username)])
  }

然后将removeCard和addNewCard都传递到CardList

// App.js
...
  <CardsList remove={removeCard} cards={cards} add={addNewCard}/>

并将事件配置为触发挂钩并使用状态

// Card.js
...

    return (
        <div style={{margin: '1em', opacity: selected ? '1' : '0.5'}}
            onMouseLeave={() => selected ? null : props.remove(props.name)}
            onClick={() => selectCard(true)}
        >
...

//Card.js
...
返回(
选中？null:props.remove（props.name）}
onClick={（）=>selectCard（true）}
>
...

这实际上并没有将

addNewCard

的控制权从一张表单转移到另一张卡片，但它最终会强制用户界面遵循卡片组件的状态