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/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>

在codeandbox链接中查看工作示例

React-动态进度栏

1 个答案: