在 React 父功能组件react-dual-listbox中访问 React 子类组件状态的最佳方式

如何解决在 React 父功能组件react-dual-listbox中访问 React 子类组件状态的最佳方式

我倾向于使用 React 功能组件和钩子，因为我没有很多 React 经验。我想在父功能组件中使用 react-dual-listBox 类组件。在这个父组件中，我希望能够访问子类组件的 selected 状态。这样做的最佳方法是什么？

来自 https://github.com/jakezatecky/react-dual-listbox 的子 react-dual-listBox 组件

import React from 'react';
import DualListBox from 'react-dual-listBox';

const options = [
    { value: 1,label: 'Option One' },{ value: 2,label: 'Option Two' },];

class DualListChild extends React.Component {
    state = {
        selected: [1],};

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                options={options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

包含在标准功能组件中

function Parent() {
    return(
        <div>
            <DualListChild/>
        </div>
    )
}

export default Parent;

例如，是否有可能在父组件中有一个钩子来改变与双列表框选择的状态相对应的状态？基本上我想将状态传递给一个功能组件？有没有办法做到这一点？

谢谢

解决方法

您将执行与在 DualListChild 中执行的操作类似的操作，不同之处在于使用 useState 挂钩：

class DualListChild extends React.Component {
    onChange = (selected) => {
        this.props.onSelected(selected);
    };

    render() {
        return (
            <DualListBox
                options={options}
                selected={this.props.selected}
                onChange={this.onChange}
            />
        );
    }
}

function Parent() {
    const [selected,setSelected] = React.useState();
    return (
        <div>
            <DualListChild selected={selected} onSelected={setSelected} />
        </div>
    )
}

现在您可以访问 selected 组件内的 setSelected（甚至 Parent）。

,

作为另一种方式，您可以使用另一种状态来跟踪父级中的选定选项并将其 setter 函数发送给子级。每当子节点的状态发生变化时，调用来自父节点的 setter 函数。通过这种方式，选定的选项状态将随时为子组件和父组件提供最新值。

function Parent() {
    const [selectedOptions,setSelectedOptions] = useState([]);

    return(
        <div>
            <DualListChild onSelectedOptionsChange={setSelectedOptions}/>
        </div>
    )
}

export default Parent;

class DualListChild extends React.Component {
    ...
    onChange = (selected) => {
        this.setState({ selected });
        props.onSelectedOptionsChange(selected);
    };
    ...
}