gpt4 book ai didi

javascript - ReactJS:将数据从 child 传递给 parent

转载 作者:行者123 更新时间:2023-11-30 19:53:42 25 4
gpt4 key购买 nike

我刚接触 React,无法解决这个问题。

我有一个嵌入在主应用程序组件中的搜索组件。在搜索组件中,我使用搜索栏中的输入值进行 API 调用。但我不知道如何将数据返回给父级(我目前使用类似于 API 将返回的数据的硬编码状态对象),以将 I 传递给另一个组件。

基本上:从 Child 中的 API 获取数据,将其传递给父级并向下传递给其他 2 个子级

import React, {Component} from 'react';
import GroupItem from './components/GroupItem'
import SearchBar from './components/SearchBar'

class App extends Component {

state = {
views: [
{
name: 'Testname',
description: 'testbeschreibung',
status: 'ok'
},
{
name: 'Ein Anderer Titel',
description: 'lorem ipsum',
status: 'ok'
}
],
commands: [
{
name: 'Wieder etwas',
description: 'testbeschreibung',
status: 'ok'
}
],
search : []
}


render()
{
return (
<div>
<SearchBar/>
<h2>Views </h2>
{this.state.views.map((view) => (<GroupItem data={view} type={'view'} />))}
<h2>Commands</h2>
{this.state.commands.map((command) => (<GroupItem data={command} type={'command'} />))}
</div>
);
}
}

export default App;


import React, {Component} from 'react';

class SearchBar extends Component {

callApi(){
let search = this.refs.search.value;
fetch('http://my-awesome.api/'+search)
.then((result) => {
return result.json();
}).then((jsonResult) => {
console.log(jsonResult);
})
}

render() {
return (
<div class="input-group mb-3" id="search">
<input type="text" class="form-control" ref="search" placeholder="URL" aria-label="URL" />
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onClick={() => this.callApi()}>Search</button>
</div>
</div>
);
}
}

export default SearchBar;

最佳答案

您需要从 App Component 传递一个处理程序,它有一个 prop 并让它更新 state,请检查下面的代码对其进行了编辑。

import React, {Component} from 'react';
import GroupItem from './components/GroupItem'
import SearchBar from './components/SearchBar'

class App extends Component {

state = {
views: [
{
name: 'Testname',
description: 'testbeschreibung',
status: 'ok'
},
{
name: 'Ein Anderer Titel',
description: 'lorem ipsum',
status: 'ok'
}
],
commands: [
{
name: 'Wieder etwas',
description: 'testbeschreibung',
status: 'ok'
}
],
search : []
}

handleSearchFill = (data) =>{
this.setState({search:data})
}


render()
{
return (
<div>
<SearchBar searchFill={this.handleSearchFill}/>
<h2>Views </h2>
{this.state.views.map((view) => (<GroupItem data={view} type={'view'} />))}
<h2>Commands</h2>
{this.state.commands.map((command) => (<GroupItem data={command} type={'command'} />))}
</div>
);
}
}

export default App;


import React, {Component} from 'react';

class SearchBar extends Component {

callApi(){
let search = this.refs.search.value;
fetch('http://my-awesome.api/'+search)
.then((result) => {
this.props.searchFill(result.json());
}).then((jsonResult) => {
console.log(jsonResult);
})
}

render() {
return (
<div class="input-group mb-3" id="search">
<input type="text" class="form-control" ref="search" placeholder="URL" aria-label="URL" />
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onClick={() => this.callApi()}>Search</button>
</div>
</div>
);
}
}

export default SearchBar;

关于javascript - ReactJS:将数据从 child 传递给 parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54231601/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com