Сделать ошибку TextField истинной в зависимости от пользовательского ввода в пользовательском интерфейсе материала

Question

Я полный новичок, чтобы реагировать, и javascript, и мне удалось сделать это далеко, но я столкнулся с проблемой. Я не уверен, как манипулировать ошибкой TextField пользовательского интерфейса материала в зависимости от того, что пользователь вводит. Например, если пользователь вводит что-либо, что не является числом или числом меньше нуля, я хочу, чтобы ошибка TextField равнялась true.

          <TextField
                  label="Income"
                  id="income"
                  className={clsx(classes.margin, classes.textField)}
                  InputProps={{
                    startAdornment: <InputAdornment position="start">$</InputAdornment>,
                  }}
                  variant="outlined"
          />

На данный момент, когда пользователь нажимает кнопку отправки, внешняя функция захватывает каждый элемент по его идентификатору и проверяет его на наличие ошибок.

Answer 1

Изменил мой код на модель исходного материала material-ui. Я добавил значение onChange и ошибку к каждому из моих текстовых полей следующим образом:

<TextField
  label="Income"
  id="income"
  className={clsx(classes.margin, classes.textField)}
  InputProps={{
    startAdornment: <InputAdornment position="start">$</InputAdornment>,
  }}
  variant="outlined"

  value={values.income}
  onChange={handleChange('income')}
  error={values.income_error}
/>

И установил для этих значений значение по умолчанию:

  const [values, setValues] = React.useState({
    income: '',
    income_error: false
   })

Затем в моей функции onChange Я проверил каждый желаемый реквизит:

  const handleChange = prop => event => {
    var error_id, error_val = false, user_input = event.target.value
    error_id = prop + '_error'
    // If statements will highlight red if user types in undesired information
    if (prop === 'purchase_price' || prop === 'down_payment' || prop ===    'interest_rate'
        || prop === 'loan_duration' || prop === 'yearly_payments' || prop === 'income') {
      if ((parseFloat(user_input) < 0 || isNaN(parseFloat(user_input))) && user_input !== '') {
        error_val = true
      }
    }
    setValues({ ...values, [prop]: event.target.value, [error_id]: error_val});
  };