Обязательный атрибут в материале пользовательского интерфейса TexrField не работает при отправке - PullRequest
Новая
       7

Обязательный атрибут в материале пользовательского интерфейса TexrField не работает при отправке

0 голосов
/ 09 мая 2019

Я использую текстовое поле библиотеки материалов в моем приложении реакции в качестве поля ввода.Я хочу добавить обязательный атрибут в мое текстовое поле, чтобы он проверялся на стороне клиента, но я заметил, что обязательный атрибут не работает при нажатии кнопки «Отправить», и ввод формы отправляется в функцию при нажатии без проверки обязательного атрибута.

Вот код текстового полякоторый я использую в моем рендере 

 <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>

1 Ответ

2 голосов
/ 09 мая 2019

Здесь я изменяю твой код - 

   <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>
...