Блог

У меня есть элемент ввода электронной почты в моем компоненте react. Я использую правила проверки электронной почты по умолчанию для ввода, и :invalid псевдоклассу присваивается значение элемента ввода, когда значение недопустимо (как описано здесь: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 amp;amp; valueIsInvalid (
            <Text color="red">{t.emailInput.error}</Text>
        )}
    )
}
  

Вы можете получить доступ к действительности HTML-элемента с помощью API проверки ограничений.

Вы можете либо получить доступ к этому значению из 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 amp;amp; (
          <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>  

Я думаю, вы хотите получить доступ к 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 amp;amp; valueIsInvalid (
        <Text color="red">{t.emailInput.error}</Text>
    )}
)
}
  

Я использую старый API обратного вызова ref