材料 ui TextField 中的必需属性在提交时不起作用

Question

我在我的反应应用程序中使用材料 ui 库的文本字段作为输入框。我想在我的文本字段中添加必需的属性，以便它在客户端进行验证，但我注意到必需的属性在提交按钮上不起作用，并且表单输入在点击时发送到功能，而不验证必需的属性。

这是我在渲染中使用的文本字段代码

 <form >

          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <TextField
        required
        id="standard-required"
            name="username"
            label="Employee ID"
            value={this.state.username}
            onChange={this.handleChange}
            margin="normal"
            variant="outlined"
          />
          <br></br>

          <TextField style={{width:'14.5%'}}
            name="password"
            id="outlined-password-input"
            label="Password"
            // type="password"
            type={this.state.showPassword ? 'text' : 'password'}
            value={this.state.password}
            isRequired="true"
            onChange={this.handleChange}
            autoComplete="current-password"
            margin="normal"
            variant="outlined"
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label="Toggle password visibility"
                    onClick={this.handleClickShowPassword}
                  >
                    {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
          <br></br>
          <br></br>


          <FormControl variant="outlined" className={styles.formControl} required>
            <InputLabel
              ref={ref => {
                this.InputLabelRef = ref;
              }}
              htmlFor="outlined-age-simple"
            >
              Role
          </InputLabel>

            <Select style={{ width: 220 }}

              name="role"
              value={this.state.role}
              onChange={this.handleChange}
              input={
                <OutlinedInput
                  labelWidth={this.state.labelWidth}
                  name="name"
                  id="outlined-age-simple"
                // value={this.state.role}
                />

              }
            >

              <MenuItem value={'Doctor'}>Doctor</MenuItem>
              <MenuItem value={'Nurse'}>Nurse</MenuItem>
              <MenuItem value={'Receptionist'}>Receptionist</MenuItem>
            </Select>



            <br></br>
            <br></br>
            <Button variant="contained" style={{ backgroundColor: '#2699FB', width: 220 }} onClick={this.handleSubmit}><b style={{ color: '#fff' }}>login</b></Button>
          </FormControl>
        </form>

Answer 1

我在这里更改您的代码 -

   <form onSubmit={this.handleSubmit}>

      <br></br>
      <br></br>
      <br></br>
      <br></br>
      <TextField
   required={true}
    id="standard-required"
        name="username"
        label="Employee ID"
        value={this.state.username}
        onChange={this.handleChange}
        margin="normal"
        variant="outlined"
      />
      <br></br>

      <TextField style={{width:'14.5%'}}
        required={true}
        name="password"
        id="outlined-password-input"
        label="Password"
        // type="password"
        type={this.state.showPassword ? 'text' : 'password'}
        value={this.state.password}
        isRequired="true"
        onChange={this.handleChange}
        autoComplete="current-password"
        margin="normal"
        variant="outlined"
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                aria-label="Toggle password visibility"
                onClick={this.handleClickShowPassword}
              >
                {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
      <br></br>
      <br></br>


      <FormControl variant="outlined" className={styles.formControl} required>
        <InputLabel
          ref={ref => {
            this.InputLabelRef = ref;
          }}
          htmlFor="outlined-age-simple"
        >
          Role
      </InputLabel>

        <Select style={{ width: 220 }}

          name="role"
          value={this.state.role}
          onChange={this.handleChange}
          input={
            <OutlinedInput
              labelWidth={this.state.labelWidth}
              name="name"
              id="outlined-age-simple"
            // value={this.state.role}
            />

          }
        >

          <MenuItem value={'Doctor'}>Doctor</MenuItem>
          <MenuItem value={'Nurse'}>Nurse</MenuItem>
          <MenuItem value={'Receptionist'}>Receptionist</MenuItem>
        </Select>



        <br></br>
        <br></br>
        <Button variant="contained" style={{ backgroundColor: '#2699FB', width: 220 }} type="submit"><b style={{ color: '#fff' }}>login</b></Button>
      </FormControl>
    </form>