Question

1秒后将显示弹出窗口。但是我需要使用localStorage将其仅显示给尚未订阅的用户。我确实尝试过使用类似下面的代码的本地存储，但是当显示/不显示弹出窗口时，我所得到的只是一个空白的白页。我编码的localStorage是否完全错误？请帮助

import React from 'react'
import styled from 'react-emotion'
import Rodal from 'rodal'
import '../styles/rodal.css'
import Delayed from '../components/Delayed'

const Signup = () => (
  <Containers>
    <SubsribtionForm
      action="https://subscribe/post?/....."
      method="post"
    >
      <SubscribeInput type="email" name="EMAIL" placeholder="Subscribe to Updates!" required />
      <Button type="submit" onClick={this.submit}>Add Me</Button>
    </SubsribtionForm>
  </Containers>
)

export default class Popup extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true }

    if (localStorage.getItem('submit')) {
      this.setState({ visible: false })
    }
    this.submits = this.submits.bind(this)
  }

  submits() {
    const newsub = this.state.submit
    localStorage.setItem('submit', newsub)
  }

  show() {
    this.setState({ visible: true })
  }

  hide() {
    this.setState({ visible: false })
  }

  render() {
    return (
      <div>
        <Container>
          <Delayed waitBeforeShow={1000}>
            <Rodal
              visible={this.state.visible}
              onClose={this.hide.bind(this)}
              width={500}
              height="100%"
              customStyles={customStyles}
            >
              <Box>
                <Banner />
                <ContainerContent>
                  <Header>Subscribe to our mailing list</Header>
                  <Words>
                    We will organize and send regular updates Stay informed!
                  </Words>
                </ContainerContent>
                <ContainerForm>
                  <Signup />
                </ContainerForm>
              </Box>
            </Rodal>
          </Delayed>
        </Container>
      </div>
    )
  }
}

Answer 1

constructor(props) {
  super(props)
  this.state = { 
    visible: !(localStorage.getItem('submit') !== '' && localStorage.getItem('submit') !== null), 
  }
  this.submits = this.submits.bind(this)
}

只需检查submit是否为空，就像上面一样。

另一种方法是在componentDidMount生命周期中执行以下操作

componentDidMount() {
   if (localStorage.getItem('submit')) {
     this.setState({ visible: false })
   }
}

Answer 2

您在类构造函数内调用this.setState，可以在this.state中使用简单的条件直接分配值，请在构造函数：D中使用bind。我使用长度是因为如果字符串是''长度为0则条件中的值为false

import React from 'react'
import styled from 'react-emotion'
import Rodal from 'rodal'
import '../styles/rodal.css'
import Delayed from '../components/Delayed'

const Signup = () => (
  <Containers>
    <SubsribtionForm
      action="https://subscribe/post?/....."
      method="post"
    >
      <SubscribeInput type="email" name="EMAIL" placeholder="Subscribe to Updates!" required />
      <Button type="submit" onClick={this.submit}>Add Me</Button>
    </SubsribtionForm>
  </Containers>
)

export default class Popup extends React.Component {
  constructor(props) {
    super(props)
    const submit = localStorage.getItem('submit')
    this.state = { visible: !submit && !submit.length }
    this.submits = this.submits.bind(this)
    this.show = this.show.bind(this)
    this.hide = this.hide.bind(this)

  }

  submits() {
    const newsub = this.state.submit
    localStorage.setItem('submit', newsub)
  }

  show() {
    this.setState({ visible: true })
  }

  hide() {
    this.setState({ visible: false })
  }

  render() {
    return (
      <div>
        <Container>
          <Delayed waitBeforeShow={1000}>
            <Rodal
              visible={this.state.visible}
              onClose={this.hide}
              width={500}
              height="100%"
              customStyles={customStyles}
            >
              <Box>
                <Banner />
                <ContainerContent>
                  <Header>Subscribe to our mailing list</Header>
                  <Words>
                    We will organize and send regular updates Stay informed!
                  </Words>
                </ContainerContent>
                <ContainerForm>
                  <Signup />
                </ContainerForm>
              </Box>
            </Rodal>
          </Delayed>
        </Container>
      </div>
    )
  }
}

如果用户已订阅React（LocalStorage），则不再显示弹出窗口

2 个答案: