React - 动态进度条

Question

我想做一个动态进度条。我有一个问题，下面是可供选择的选项。如果有人选择了一些选项，那么进度条应该会移动。它必须根据签出问题的数量进行更新。我有函数handleProgress，它负责当有人点击问题时更新状态。目前，她什么都不做，因为我不知道她应该如何发送问题已被检查的信息。下面是我的代码，或者也许有人会给我一些关于我的功能区应该做什么的提示，进度条会更新。

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          progressValue: 0
        };
      }

      handleProgress = () => {
        console.log("halo");
      };

      render() {
        return (
          <Styles>
            <h1>???? React Final Form Example</h1>
            <Progress value={this.state.progressValue} />
            <Wizard
              initialValues={{ employed: true }}
              onSubmit={() => {
                window.alert("Hello");
              }}
            >
              <Wizard.Page>
                <p>Page1</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page1" component="input" type="radio" value="1" />
                  <Field name="page1" component="input" type="radio" value="2" />
                  <Field name="page1" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page2</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page2" component="input" type="radio" value="1" />
                  <Field name="spage2" component="input" type="radio" value="2" />
                  <Field name="page2" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page3</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page3" component="input" type="radio" value="1" />
                  <Field name="page3" omponent="input" type="radio" value="2" />
                  <Field name="page3" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page4</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page4" component="input" type="radio" value="1" />
                  <Field name="page4" component="input" type="radio" value="2" />
                  <Field name="page4" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
            </Wizard>
          </Styles>
        );
      }
    }

这是我的全部代码https://codesandbox.io/s/8l5qn573o2

Answer 1

您可以使用 ReactStrap 中的进度条。 您需要在其中传递当前进度的值。

我已经在https://codesandbox.io/s/40w557p680https://codesandbox.io/s/40w557p680 中分叉并更改了新的代码和框

我已将 nextPage 和 previousPage 道具作为函数添加到您的向导组件中。

       <Wizard
          nextPage={this.handlePageChange} //this one
          previousPage={this.handlePageBack} //this one
          initialValues={{ employed: true }}
          onSubmit={() => {
            window.alert("Hello");
          }}
       >

现在我在这个函数上添加了这个语句：

handlePageChange = page => {
    console.log(page);
    this.setState({ progressValue: (page + 1) * 25 });
};

handlePageBack = page => {
    this.setState({ progressValue: this.state.progressValue - 25 });
  };

在您的向导组件中：

this.state = {
      page: 1,

将默认值更改为 1，以便于计算：

现在在下一个按钮上，我正在调用 prop 函数：

<button
     onClick={() => this.props.nextPage(this.state.page)}
     type="submit"
     >
     Next »
</button>

检查代码框链接中的工作示例