javascript - ReactJS - 使用 onBlur 验证电子邮件字段

Question

我有一个用于电子邮件的 MaterialUI 文本字段，它在用户离开该字段时验证输入。为此，我在 onBlur 上使用了一个函数。我想使用 helpertext 显示一条错误消息。

email 字段代码:

<TextField
    margin="dense"
    id="emailAddress"
    name="email"
    label="email"
    type="email"
    onChange={onChange}
    onBlur={validateEmail}
    value={email}
    error={validEmail}
    helperText={validEmail ? 'Please enter a valid Email' : ' '}
    fullWidth
 />

validEmail 变量在功能组件内部初始化如下:

let validEmail = false;

validateEmail 定义在同一个组件内:

const validateEmail = () => {
    if (!email || invalidEmail(email)) {
      validEmail = true;
    } else {
      validEmail = false;
    }
};

但是它不起作用并且没有显示错误消息。我在这里可能缺少什么？检查 invalidEmail 的条件确实得到执行。

Answer 1

我认为这样做的正确方法是使用组件的内部状态:

class EmailComponent extends React.Component {
  state = {
    validEmail: false,
    email: '',
  };

  onChange = (e) => {
    ...
    this.setState({
      email: e.target.value
    });
  }

  validateEmail = (e) => {
    const email = e.target.value;
    if (!email || invalidEmail(email)) {
      this.setState({
        validEmail: true,
      });
    } else {
      this.setState({
        validEmail: false,
      });
    }
  }

  render () {
    const { validEmail, email } = this.state;

    return (
      <TextField
        margin="dense"
        id="emailAddress"
        name="email"
        label="email"
        type="email"
        onChange={this.onChange}
        onBlur={this.validateEmail}
        value={email} //I think you should also set email as a state
        error={validEmail}
        helperText={validEmail ? 'Please enter a valid Email' : ' '}
        fullWidth
      />
    );
  }
}

更改无状态组件内变量的值不会让您实现您想要的，因为组件不会再次呈现，除非其中一个 Prop 或状态发生更改。

编辑:使用处理状态的父组件

class ParentComponent extends React.Component {
  state = {
    validEmail: false,
    email: '',
  };

  onChange = (e) => {
    this.setState({
      email: e.target.value
    });
  }

  validateEmail = (e) => {
    const email = e.target.value;
    if (!email || invalidEmail(email)) {
      this.setState({
        validEmail: true,
      });
    } else {
      this.setState({
        validEmail: false,
      });
    }
  }

  render () {
    const { validEmail, email } = this.state;

    return (
      <ChildComponent 
        email={email}
        validEmail={validEmail}
        onChange={this.onChange}
        validateEmail={this.validateEmail}
      />
    );
  }
}

const ChildComponent = (props) => (
  <TextField
    margin="dense"
    id="emailAddress"
    name="email"
    label="email"
    type="email"
    onChange={props.onChange}
    onBlur={props.validateEmail}
    value={props.email}
    error={props.validEmail}
    helperText={props.validEmail ? 'Please enter a valid Email' : ' '}
    fullWidth
  />
);