reactjs - onClick按钮时如何检查表单中所需的验证字段

Question

我使用 EXTReact 并拥有 TextField 这是我的代码。

 <Textfield
      required
      label="Required Field"
      requiredMessage="This field is required."
      errorTarget="under"
      name="field"
      onChange={(e) => handleChaneValue(e)}
      />
  <Button 
      ui="confirm" 
      text="BTN submit" 
      handler={handleClick} 
      style={{border: '1px solid black'}}
      />

单击提交按钮时，如果该字段没有任何值，则应显示错误消息。

Answer 1

您可以使用 Formik Formik-official。

import React from 'react';
import ReactDOM from 'react-dom';
import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

const validationSchema = yup.object({
  email: yup
    .string('Enter your email')
    .email('Enter a valid email')
    .required('Email is required'),
  password: yup
    .string('Enter your password')
    .min(8, 'Password should be of minimum 8 characters length')
    .required('Password is required'),
});

const WithMaterialUI = () => {
  const formik = useFormik({
    initialValues: {
      email: 'foobar@example.com',
      password: 'foobar',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <TextField
          fullWidth
          id="email"
          name="email"
          label="Email"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={formik.touched.email && Boolean(formik.errors.email)}
          helperText={formik.touched.email && formik.errors.email}
        />
        <TextField
          fullWidth
          id="password"
          name="password"
          label="Password"
          type="password"
          value={formik.values.password}
          onChange={formik.handleChange}
          error={formik.touched.password && Boolean(formik.errors.password)}
          helperText={formik.touched.password && formik.errors.password}
        />
        <Button color="primary" variant="contained" fullWidth type="submit">
          Submit
        </Button>
      </form>
    </div>
  );
};

ReactDOM.render(<WithMaterialUI />, document.getElementById('root'));

Answer 2

请参考以下代码。

注意：代码只查找单个 TextField。我使用了 material-ui TextField 和 Button 组件（我不确定您使用的是哪一个）。但是，逻辑应该保持不变。

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function App() {
  const [field, setField] = useState('');
  const [error, setError] = useState(false);
  const handleClick = () => {
    if (!field) {
      setError(true);
      return null;
    }
  };
  const handleChangeValue = (e) => {
    setField(e.target.value);
  };
  return (
    <div>
      <TextField
        required
        label="Required Field"
        value={field}
        error={!!error}
        name="field"
        onChange={(e) => handleChangeValue(e)}
        helperText={error ? 'this is required' : ''}
      />
      <Button onClick={handleClick} style={{ border: '1px solid black' }}>
        Submit
      </Button>
    </div>
  );
}
export default App;

Answer 3

你应该：

- 第 1 步：当 textfField 更改时，更新组件的状态（使用 textfield 的值）==> 需要两种绑定方式（React 中的数据绑定）

- 第 2 步：然后，无论如何创建错误消息 div/text/paragraph（在您想要的位置并使用您需要的样式），然后添加样式 display:none。在这里，您只需设置功能的 html 和 css。

- 第 3 步：然后，在单击（按钮）时，检查 textField 的状态值（您在第 1 步中创建的那个）。如果为空，则更改错误消息的样式 div ==> display:block