ReactJS：将数据从子级传递到父级

Question

我刚刚拿起 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;

Answer 1

您需要从App Component传递一个处理程序有一个prop并让它更新状态，请检查下面我编辑过的代码。

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;