在 PrimeReact 的 ScrollPanel 中使用 antd 中的 Vertical Steps 组件

Question

我想在primeReact ScrollPanel(https://www.primefaces.org/primereact/#/scrollpanel(中使用antd(https://ant.design/components/steps/(的垂直步骤。我还想使用"下一个"和"上一个"按钮，如"antd"示例中所示。直到这里一切正常，但是当我有很多步骤并且单击"下一步"移动到下一步但滚动器没有移动时，即突出显示的步骤移出视图。如何使滚动也移动，以便所选步骤位于中心视图中？

滚动面板中垂直步骤的代码：

class VerticalStepsWithContent extends Component {
constructor(props) {
super(props);
this.state = { current: 0 };
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
onChange = current => {
console.log("onChange:", current);
this.setState({ current });
};
render() {
const { Step } = Steps;
const steps = [
{
title: "First",
content: "First-content"
},
{
title: "Second",
content: "Second-content"
},
{
title: "Last",
content: "Last-content"
}
];
const { current } = this.state;
return (
<div>
<div className="steps-action">
{current < steps.length - 1 && (
<Button type="primary" onClick={() => this.next()}>
Next
</Button>
)}
{current === steps.length - 1 && (
<Button
type="primary"
onClick={() => message.success("Processing complete!")}
>
Done
</Button>
)}
{current > 0 && (
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
Previous
</Button>
)}
</div>
<ScrollPanel
header="Summary"
style={{ height: "400px" }}
className="custom"
>
<Steps
direction="vertical"
current={current}
onChange={this.onChange}
>
{steps.map(item => (
<Step key={item.title} title={item.title} />
))}
</Steps>
</ScrollPanel>
{/* <div className="steps-content">{steps[current].content}</div> */}
</div>
);
}
}
export default VerticalStepsWithContent;

Answer 1

您没有将类函数绑定到this实例(这是一个常见的错误(：

class VerticalStepsWithContent extends Component {
constructor(props) {
super(props);
this.state = { current: 0 };
this.next = this.next.bind(this);
// bind rest of the functions
}
}

您应该避免使用constructor，而是使用类属性：

class VerticalStepsWithContent extends Component {
state = { current: 0 };
next = () => {
const current = this.state.current + 1;
this.setState({ current });
};
// ...
}
export default VerticalStepsWithContent;