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

Question

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

电子邮件字段的代码：

<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
      />
    );
  }
}

更改无状态组件内变量的值不会让您实现所需的效果，因为除非更改其中一个道具或状态，否则该组件不会再次渲染。

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

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
  />
);