如何在 Material ui 表单输入字段中添加验证答案

【问题标题】：How to add validation in Material ui form input fields如何在 Material ui 表单输入字段中添加验证
【发布时间】：2020-02-12 11:10:26
【问题描述】：

我有一个使用 Material ui 表单构建的反应功能组件，其中包含 TextField 和 onChange 事件在“容器组件”中处理。下面是我需要添加required 作为客户端表单验证的表单代码，但是它不起作用。我还需要在容器组件中添加一些逻辑吗？

<form className={classes.container}>
<Grid container item xs={12} alignItems="center">
<TextField
  id="outlined-bare"
  className={classes.textField1}
  defaultValue=""
  required
  margin="normal"
  variant="outlined"
  autoComplete="on"
  InputProps={{ style: { height: 40 } }}
  onChange={(e) => handleChange(e, 'Name')}
/>

这是容器组件中的事件处理程序，如下所示

 setInput = (e, source) => {
    e.preventDefault();
    switch  (source) {
        case "Name":
            this.setState({
                ...this.state,
                Name: e.target.value
            })
            break;
    default:
            this.setState({...this.state})
            break;
    }
}

 return (
        <div>
            <Drawer
                route={routes.abc}
                history={this.props.history}
                handleChange={this.setInput}
            />
        </div>
    )

出了什么问题，遗漏了什么？我是 ReactJs 的新手。请建议。

【问题讨论】：

你的提交功能是什么？那是我要进行客户端验证的地方，但我没有看到。
@BrianThompson 我有一个Submit 函数，它将读取在 TextField 中输入的值并调用 redux 操作。我需要先进行验证..谢谢
@BrianThompson 你认为这可能还是我应该在提交函数中检查TextField 值？在这种情况下，required 在哪里工作？

标签： javascript reactjs forms validation material-ui

【解决方案1】：

有了可用的信息，我建议执行以下简化版本：

容器

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      other_value: '',
    }
  }

  handleChange = (field, value) => {
    this.setState({ [field]: value });
  }

  valid = () => {
    if (!this.state.name) {
      return false;
    }
  }

  submit = () => {
    if (this.valid()) {
      // call your redux submit
    }
  }

  render() {
    return (
      <MyForm
        values={this.state}
        handleChange={this.handleChange}
        submit={this.submit}
      />
    );
  }
}

表单组件

const MyForm = (props) => {
  return (
    <form onSubmit={props.submit}>
      <TextField
        onChange={(e) => props.handleChange('name', e.target.value)}
        value={props.values.name}
        required
      />
      <TextField
        onChange={(e) => props.handleChange('other_value', e.target.value)}
        value={props.values.other_value}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

首先，如果您在输入中使用onChange，您还应该提供其值以确保它们保持同步。

其次，如果你想让required 属性生效，你应该确保你的提交函数被表单调用。 required 属性只是传递给 input 元素，它将被包装 form (explanation of required) 使用。因此，如果表单不是调用提交函数的表单，required 将被忽略。

最后，我只提供了一个简单的验证函数，如果您希望它更全面，只需添加更多检查并返回特定错误或错误数组，而不是简单的真假。如果您只需要一个简单的必需检查，您也可以完全跳过验证功能。

【讨论】：