Question

我在我的react应用程序中将Material ui库的文本字段用作输入框。我想在文本字段中添加必填属性，以便在客户端进行验证，但我注意到必填属性在提交按钮上无效，并且表单输入在单击时未验证必填属性就发送给函数。

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

sudo service php7.3-fpm reload  #Change to your version

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>

材质ui TexrField中的必填属性无法提交

1 个答案: