使用材质UI文本字段在多个条件下显示错误

Question

我有2个主要的ui文本字段。我想在多个条件下使用错误道具显示错误。

例如，如果字符串为空，或者字符串不为空且与所需的表达式不匹配，

有人可以帮我吗？

谢谢！

Answer 1

这在此处的material-ui文档中进行了解释：

https://material-ui.com/components/text-fields/#validation

您看到错误需要在此处设置为true或false：

https://material-ui.com/api/text-field/

例如，在您的组件上：

 <TextField
      error={error}
      id="outlined-error-helper-text"
      label="Error"
      defaultValue="Hello World"
      helperText={state.helperText}
      variant="outlined"
      onChange={handleChange}
    />

然后使用您的错误功能：

const error = () => {
  if(state.value !== ""){
    setState({...state, helperText: "Input Changed!"})
    return true
  }else{
    setState({...state, helperText: "No Input!"})
    return false
  }
}

确保您具有handleChange（）设置值状态：

const handleChange = (e) => {
setState({...state, value: e.value})
}

希望这会为您指明正确的方向。我假设您正在使用功能组件。