Question

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

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

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

Answer 1

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

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

如何以逐步形式管理元素的可见性

1 个答案: