Reactjs 物料界面上所需的文本字段验证

如果在必需的文本字段中写入了内容，则一切正常，但如果必需的文本字段为空，则会在helperText上显示错误消息。但问题是我不能在if条件下使用lenth，因为我已经设置了onClick处理程序或方法，但我可以在onChange处理程序或方法上使用lenth。如果我不能使用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);

import React，{Component}来自'React'；
从“@material ui/core”导入{容器、网格、排版、文本字段、按钮}；
从“@material ui/core/styles”导入{withStyles}”；
常量样式=主题=>({
mT:{
marginTop：主题。间距（1）
},
先生:{
边缘光：主题。间距（3）
}
});
类帐户扩展组件{
构造函数（）{
超级（）
这个州={
帐户名：“”，
帮助文本：“”，
错误：false
}
this.onChange=this.onChange.bind（this）；
this.onClick=this.onClick.bind（this）；
}
onChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）
}
onClick=（事件）=>{
如果（event.target.required>0）{
this.setState（{helperText:''，错误：false}）；
}否则{
this.setState（{helperText:'Invalid format'，error:true}）；
}
}
render（）{
const{classes}=this.props；
返回(
添加帐户
提交
);
}
}
使用样式导出默认值（样式，{withTheme:true}）（帐户）；

我知道它会像这样工作，但当我有多个必需的文本字段时，我必须调用每个API。我想为所有必需的文本字段（多个）调用一个API。我已经编辑了答案

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