React父函数组件如何访问react-dual-listbox类子组件的selected状态

该方案完全符合React单向数据流的设计理念，无需额外API，性能最优且维护成本最低，是父子组件状态同步的首选实现。

实现逻辑：将原本存储在子组件内部的selected状态提升到父组件进行管理，父组件通过props将状态值和状态更新方法传递给子组件，子组件不再维护独立内部状态，完全受控于父组件即可实现双向同步。

改造后的父组件代码：

import { useState } from 'react';
import DualListChild from './DualListChild';

function Parent() {
    // 父组件统一维护双选框的选中状态
    const [selected, setSelected] = useState([1]);

    // 此处可直接获取实时同步的选中值，做后续业务逻辑处理
    console.log('双选框当前选中值：', selected);

    return(
        <div>
            <DualListChild 
                selected={selected}
                onSelectChange={setSelected}
            />
        </div>
    )
}

export default Parent;

改造后的子组件代码：

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 {
    onChange = (selected) => {
        // 直接调用父组件传递的更新方法修改父组件状态
        this.props.onSelectChange(selected);
    };

    render() {
        // 读取父组件传递的选中值，不使用自身state
        const { selected } = this.props;

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

export default DualListChild;

如果不想改动现有子组件的内部逻辑，可以使用ref直接获取子组件实例读取状态，该方案仅适合临时场景使用，不符合单向数据流规范，子组件状态变更时父组件无法自动感知，需要主动触发读取操作。

父组件实现代码：

import { useRef } from 'react';
import DualListChild from './DualListChild';

function Parent() {
    const dualListRef = useRef(null);

    // 主动触发读取子组件状态
    const handleGetSelected = () => {
        if (dualListRef.current) {
            console.log('读取到的子组件选中值：', dualListRef.current.state.selected);
        }
    };

    return(
        <div>
            <DualListChild ref={dualListRef}/>
            <button onClick={handleGetSelected}>获取选中值</button>
        </div>
    )
}

export default Parent;

内容的提问来源于stack exchange，提问作者Jack Atkinson