时间戳

首页 > 解决方案 > 根据 Material UI 中的用户输入使 TextField 错误为真

javascript - 根据 Material UI 中的用户输入使 TextField 错误为真

问题描述

我是反应和 javascript 的完整初学者，我已经设法做到了这一点，但遇到了问题。我不确定如何根据用户输入的内容来处理 Material UI TextField 错误。例如，如果用户输入的内容不是数字或小于零的数字，我希望我的 TextField 错误等于 true。

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

截至目前，当用户点击提交按钮时，外部函数会通过其 id 抓取每个元素并对其进行错误检查。

标签： javascriptreactjsmaterial-ui

解决方案

将我的代码更改为对 material-ui 的原始布局进行建模。我为每个 TextField 添加了一个值、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});
  };

推荐阅读