Question

如果有 2 个文件称为 Home.js 和 search.js 文件。 Home 是父组件。所以我想通过search.js中的搜索栏将数据从孩子发送到父母。提交后搜索btn如何将数据传递给home组件。

Home.js

<style>
table{
  border-spacing: unset;    # values: inherent, initial, unset or 0px
}
</style>

search.js

---
title: tintHtml() add padding to kable "
output: tint::tintHtml
---
  
```{r}
library(kableExtra)
library(magrittr)
```
<style>
table{
  border-spacing: unset;    # inherent, initial, unset, 0px
}
</style>

```{r}
knitr::kable(
  mtcars[1:6, 1:6], 
  caption = 'how do I get rid of white padding ?'
) %>%  
  row_spec(0, background = "blue", color = "white") %>% 
  row_spec(1, background = "green", color = "white") 
```

我该怎么做？

Answer 1

Home.js

const Home = () => {
    
    const [data, setData] = useState();
    const searchClickHandler = (text) => {
    // you can use search bar text from child component
    }
    return ( 
        <div className="home">
            <search clickFromChild={(text) => searchClickHandler(text)} ></search>
        </div>
     );
}

Search.js

const Search = (props) => {
const [text,setText] = React.useState("")
    
    return ( 
        <div className="search">
            <input onChange={(e) => setText(e.target.value)} type="text" />
            <button onClick={() => props.clickFromChild(text)} >Search</button>
        </div>
     );
}

React 使用钩子将数据通过父级传递给子级

1 个答案: