#reactjs #validation #input
#reactjs #проверка #ввод
Вопрос:
У меня есть элемент ввода электронной почты в моем компоненте 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>
)}
)
}
Ответ №1:
Вы можете получить доступ к действительности 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>
Ответ №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 amp;amp; valueIsInvalid (
<Text color="red">{t.emailInput.error}</Text>
)}
)
}
Я использую старый API обратного вызова ref
Комментарии:
1. Я не понимаю, как определить valuesIsInvalid из вашего примера. Вы пишете const valuesIsInvalid = this.emailInput, что, на мой взгляд, не имеет смысла.
2. @user1283776, я хочу сказать, что этот ref api предоставит вам полный доступ к вашему полю ввода, чтобы вы могли делать все, что захотите.