我倾向于使用 React 功能组件和钩子(Hook),因为我没有太多的 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;
是否有可能,例如,在父组件中有一个钩子(Hook)来改变与双列表框选择的内容相对应的状态?本质上我想将状态传递给功能组件?有办法做到这一点吗?
谢谢
最佳答案
您将执行与在 DualListChild
中执行的操作类似的操作,只是使用 useState
Hook :
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>
)
}
现在您可以访问 Parent
组件中的 selected
(甚至 setSelected
)。
关于javascript - 在 React 父功能组件(react-dual-listbox)中访问 React 子类组件状态的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68487501/