Question

我在react js项目中使用Semantic UI和MediaQuery。

          <Form.Input
            fluid icon='user' iconPosition='left' placeholder='email'
            onChange={(e, {value}) => {this.setState({email: value})
            console.log(value)
            console.log("*"+this.state.email+"*")}}
          />

在上面的代码中，我尝试更改状态＆＃34; email＆＃34;每次用户输入内容。但奇怪的是控制台日志输出是

q
**

表示该值为＆＃34; q＆＃34;，但在我设置状态后，它被清除为空。因此，每当我尝试输入任何内容时，我的输入框都将被删除。但是当我在没有MediaQuery的情况下使用它时，我没有遇到这个问题。完整代码位于

之下

      <div className="App">
    <div>
      <header className="App-login-header">
        <h3 className="App-title">Peterbook</h3>
      </header>
    </div>
    <Grid style={{marginTop: '-80px'}} columns={16} divided='vertically' className="text_board">
      <Mobile>
        <Grid.Column mobile={14} computer={5} verticalAlign='middle' className="login_box"
                     style={{height: '55%', marginTop: '14%'}}>
          <h2 className="ui form_header centered">
            <div className="content mid_text">
              Log-in to your account
            </div>
          </h2>
          <Container style={{width: '400px', marginTop: '2em', marginBottom: '2em'}}>
            <Form size='huge'>
              <Form.Input
                fluid icon='user' iconPosition='left' placeholder='email'
                onChange={(e, {value}) => {this.setState({email: value})
                console.log(value)
                console.log("*"+this.state.email+"*")}}
              />
              <Form.Input
                fluid icon='lock' iconPosition='left' placeholder='Password' type='password'
                onChange={(e, {value}) => this.setState({password: value})}
              />
            </Form>
          </Container>
          <Button positive icon='checkmark' content="Log In" labelPosition='right' onClick={this.handleSubmit}/>
          <Button color='grey' icon='genderless' labelPosition='right' content='Sign up'
                  onClick={() => this.setState({open: 1})}/>
        </Grid.Column>
      </Mobile>
      <Default>
        <Grid.Column mobile={14} computer={9} style={{height: '85%', marginTop: '7%'}}>
          <Grid.Row className='text_box text_font'>
            <TextBox header={this.state.header_privacy} text={this.state.msg_privacy}/>
          </Grid.Row>
          <Grid.Row style={{height: '25%'}} className='text_font'>
            <TextBox header={this.state.header_security} text={this.state.msg_security}/>
          </Grid.Row>
          <Grid.Row style={{height: '25%'}} className='text_font'>
            <TextBox header={this.state.header_freedom} text={this.state.msg_freedom}/>
          </Grid.Row>
        </Grid.Column>
        <Grid.Column mobile={14} computer={5} verticalAlign='middle' className="login_box"
                     style={{height: '55%', marginTop: '14%'}}>
          <h2 className="ui form_header centered">
            <div className="content mid_text">
              Log-in to your account
            </div>
          </h2>
          <Container style={{width: '400px', marginTop: '2em', marginBottom: '2em'}}>
            <Form size='huge'>
              <Form.Input
                fluid icon='user' iconPosition='left' placeholder='email'
                onChange={(e, {value}) => this.setState({email: value})}
              />
              <Form.Input
                fluid icon='lock' iconPosition='left' placeholder='Password' type='password'
                onChange={(e, {value}) => this.setState({password: value})}
              />
            </Form>
          </Container>
          <Button positive icon='checkmark' content="Log In" labelPosition='right' onClick={this.handleSubmit}/>
          <Button color='grey' icon='genderless' labelPosition='right' content='Sign up'
                  onClick={() => this.setState({open: 1})}/>
        </Grid.Column>
      </Default>
    </Grid>
    <SignUp onclose={() => this.onclose()} open={this.state.open === 1} onClose={() => this.setState({open: 0})}/>
  </div>

MediaQuery影响React JS中的状态

0 个答案: