Блог

Если что-то написано в требуемом текстовом поле, то все будет в порядке, но если требуемое текстовое поле пустое, то оно покажет мне сообщение об ошибке в вспомогательном тексте. Но проблема в том, что я не могу использовать lenth в условии if, где я установил обработчик или метод onClick, но я могу использовать lenth в обработчике или методе onChange. Если я не могу использовать lenth, то как я узнаю, что что-то написано в требуемом текстовом поле. Вот мой код:

 import React, { Component } from 'react';
import { Container, Grid, Typography, TextField, Button } from '@material-ui/core';
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
    mT: {
        marginTop: theme.spacing(1)
    },

    mR: {
        marginRight: theme.spacing(3)
    }
});

class Account extends Component {

    constructor(){
        super()
        this.state={
            accname: '',
            helperText: '',
            error: false
        }
        this.onChange = this.onChange.bind(this);
        this.onClick = this.onClick.bind(this);
    }

    onChange = (event) => {
        this.setState({[event.target.name]:event.target.value})
    }

    onClick = (event) => {
        if (event.target.required > 0) {
            this.setState({ helperText: '', error: false });
          } else {
            this.setState({ helperText: 'Invalid format', error: true });
          }
    }

    render() {
     const { classes } = this.props;
        return (
            <React.Fragment>
                <Container>
                    <Grid container
                          spacing={2}>
                              <Grid item
                                    xs={12}
                                    sm={12}
                                    md={12}
                                    lg={12}
                                    xl={12}>
                                        <Typography className={classes.mT}
                                                    variant="h4"
                                                    color="textPrimary">
                                            Add Account
                                        </Typography>  
                              </Grid>

                              <Grid item
                                     xs={12}
                                     sm={12}
                                     md={12}
                                     lg={12}
                                     xl={12}>
                                         <TextField className={classes.mR}
                                                    label="Account Name"
                                                    name="accname"
                                                    type="text"
                                                    helperText={this.state.helperText}
                                                    onChange={this.onChange}
                                                    value={this.state.accname}
                                                    error={this.state.error}
                                                    variant="outlined"
                                                    color="primary"
                                                    size="small"
                                                    autoFocus
                                                    required />

                                        <Button variant="contained" 
                                                color="primary"
                                                onClick={this.onClick} >
                                            Submit
                                        </Button>
                              </Grid>
                    </Grid>
                </Container>
            </React.Fragment>
        );
    }
}

export default withStyles(styles, { withTheme: true })(Account);
 

 onClick = () => {
    if(
       this.state.accname.trim() != '' amp;amp; 
       this.state.firstName.trim() != '' amp;amp;
       this.state.lastName.trim() != ''
      ){
        //Your API call here
    }
    else{
        alert("fill the empty spaces!");
    }