0

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

ScrollPanel 中的垂直步骤代码：

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;
4

1 回答 1

0

您没有将类函数绑定到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;
于 2019-08-28T17:35:14.440 回答