Question

我的react组件中有一个电子邮件输入元素。我使用默认的电子邮件验证规则进行输入，当值无效时，:invalid伪类将设置为input元素（如此处所述：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email）。

我想访问我的React组件中输入元素是否无效。

我想我正在寻找如何在下面的代码中确定const valuesIsInvalid。

如何找到该值？

render() {
    const valueIsInvalid = ???

    return (
        <input 
            type="email" 
            value={this.state.value}
            ...
        />
        {this.props.showInvalidValueError && valueIsInvalid (
            <Text color="red">{t.emailInput.error}</Text>
        )}
    )
}

Answer 1

您可以使用Constraint Validation API访问HTML元素的有效性。

您可以使用onChange从event.target函数访问此值，也可以通过设置ref直接访问它。下面的示例演示了前者。

const { Component } = React;

class App extends Component {
  state = {
    inputEmail: "",
    emailValid: true,
  };
  changeEmail = event => {
    const value = event.target.value;
    const validity = event.target.validity;
    this.setState({
      inputEmail: value,
      emailValid: validity.valid,
    });
  };
  render() {
    const { emailValid } = this.state;
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input
          type="email"
          state={this.state.inputEmail}
          onChange={this.changeEmail}
          required
        />
        { !emailValid && (
          <p>Input is not valid</p>
        )}
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

我认为您想在value方法之外访问input字段的render。为此，您可以使用React Refs API。

您可以编写以下代码：-

render() {
// now you have access to your email input field and can do any type
// of changes to this input
const valuesIsInvalid = this.emailInput 

return (
    <input 
        type="email" 
        value={this.state.value}
        ref={(input) => this.emailInput = input}
        ...
    />
    {this.props.showInvalidValueError && valueIsInvalid (
        <Text color="red">{t.emailInput.error}</Text>
    )}
)
}

我正在使用旧的callback ref api

从React访问输入元素的电子邮件伪类？

2 个答案: