Отправка данных из функционального компонента в родительский компонент

Question

У меня есть следующий функциональный компонент, который отображает 3 флажка (Shopify Polaris):

function CustomersList() {
    const [selected, setSelected] = useState(['hidden']);

    const handleChange = useCallback((value) => setSelected(value), []);

    return (
        <ChoiceList
            allowMultiple
            title="Customers:"
            choices={[
                {
                    label: 'Customer 1',
                    value: 'customer1',
                },
                {
                    label: 'Customer 2',
                    value: 'customer2',
                },
                {
                    label: 'Customer 3',
                    value: 'customer3',
                }
            ]}
            selected={selected}
            onChange={handleChange}
        />
    );
}

... и такое же удовольствие c. компонент используется в родительском компоненте (оба в одном и том же файле):

class ParentComponent extends Component {
    render() {
        return (
            <Page title="Title">
                <Layout>
                    <Layout.Section>
                        <Card title="Customers" sectioned>
                            <CustomersList />

                            <Subheading>
                                Selected customers: {customer_value}
                            </Subheading>
                        </Card>
                    </Layout.Section>
                </Layout>
            </Page>
        )
    }
}

Теперь мой вопрос состоит в том, как отправить и получить ценность для клиента (customer1, customer2, et c) из забавы c. компонент к родительскому компоненту, чтобы показать значение здесь: Selected customers: {customer_value}?

Спасибо

Answer 1

Вы можете отправить обратный вызов на CustomersList, который прикрепит некоторые данные к вызывающей стороне. Таким образом, ваш родительский компонент может выглядеть примерно так:

class ParentComponent extends Component {
    state = {
        selection: []
    }

    setSelection(data) {
       this.setState({selection: data});
    }

    render() {
        return (
            <Page title="Title">
                <Layout>
                    <Layout.Section>
                        <Card title="Customers" sectioned>
                            <CustomersList setSelection={this.setSelection}/>

                            <Subheading>
                                Selected customers: {customer_value}
                            </Subheading>
                        </Card>
                    </Layout.Section>
                </Layout>
            </Page>
        )
    }
}

и в вашем ChoiceList вы вызываете эту функцию. это установит эти данные в его родительский компонент.

function CustomersList(setSelection) {
    const [selected, setSelected] = useState(['hidden']);

    const handleChange = // Update your handleChange to also call setSelection

и это должно сделать.