时间戳

首页 > 解决方案 > 如何以阶梯形式管理元素的可见性

javascript - 如何以阶梯形式管理元素的可见性

问题描述

我有一个带有步骤的表格。我希望在用户通过一个步骤后出现其他元素。一次只能看到一个步骤。

我尝试使用布尔状态变量，但没有任何运气。所有步骤都在通过一个之后出现。

return (
  <UserConsumer>
    {value => {
      //const {dispatch} = value;
      return (
        <div>
          <Animation pose={visible ? 'visible' : 'hidden'}>
            <div className="card col-md-12 mb-4">
              <div className="card-body">
                <form onSubmit={this.changeVisibility}>
                  <div className="form-group">
                    <Text text="Adınız ve Soyadınız" />
                  </div>
                  <div className="form-group">
                    <Input ph="Ad ve Soyad" />
                  </div>
                  <Button clickText="İleri" />
                </form>
              </div>
            </div>
          </Animation>

          <Animation pose={!visible ? 'visible' : 'hidden'}>
            {queue.push(
              <div className="card col-md-12 mb-4">
                <div className="card-body">
                  <form onSubmit={this.changeVisibility}>
                    <div className="form-group">
                      <Text text="E-mail adresiniz" />
                    </div>
                    <div className="form-group">
                      <Input ph="E-mail" />
                    </div>
                    <Button clickText="İleri" />
                  </form>
                </div>
              </div>,
            )}
          </Animation>
        </div>
      )
    }}
  </UserConsumer>
)

标签： javascriptreactjs

解决方案

我根据您的评论来回答这个问题，它隐藏了第一个但不显示第二个，因为您正在调用将返回新数组长度的推送。因此，它将显示一个数字，而不是来自第二个动画组件的元素，修复：

return (
  <UserConsumer>
    {value => {
      //const {dispatch} = value;
      return (
        <div>
          <Animation pose={visible ? 'visible' : 'hidden'}>
            <div className="card col-md-12 mb-4">
              <div className="card-body">
                <form onSubmit={this.changeVisibility}>
                  <div className="form-group">
                    <Text text="Adınız ve Soyadınız" />
                  </div>
                  <div className="form-group">
                    <Input ph="Ad ve Soyad" />
                  </div>
                  <Button clickText="İleri" />
                </form>
              </div>
            </div>
          </Animation>

          <Animation pose={!visible ? 'visible' : 'hidden'}>
              <div className="card col-md-12 mb-4">
                <div className="card-body">
                  <form onSubmit={this.changeVisibility}>
                    <div className="form-group">
                      <Text text="E-mail adresiniz" />
                    </div>
                    <div className="form-group">
                      <Input ph="E-mail" />
                    </div>
                    <Button clickText="İleri" />
                  </form>
                </div>
              </div>
          </Animation>
        </div>
      )
    }}
  </UserConsumer>
)

推荐阅读