У меня есть 2 входа (имя, фамилия) и я хочу связать одно событие размытия. Как к этому подойти?
class SimpleForm extends React.Component {
state = {
firstName: "",
firstNameError: "",
lastName: "",
lastNameError: ""
};
validateName = name => {
const regex = /[A-Za-z]{3,}/;
return !regex.test(name)
? "The name must contain at least three letters. Numbers and special characters are not allowed."
: "";
};
onLastNameBlur = () => {
const { lastName } = this.state;
const lastNameError = this.validateName( lastName) ;
return this.setState({ lastNameError });
};
onFirstNameBlur = () => {
const { firstName } = this.state;
const firstNameError = this.validateName( firstName );
return this.setState({ firstNameError });
};
onNameChange = e =>
this.setState({[e.target.name]: e.target.value});
render() {
const { firstNameError, firstName, lastName, lastNameError } = this.state;
return (
<div style = {style.form}>
<TextField name = "firstName"
label = "First name:"
onChange = {this.onNameChange}
onBlur = {this.onFirstNameBlur}
error = {firstNameError} />
<TextField name = "lastName"
label = "Last name:"
onChange = {this.onNameChange}
onBlur = {this.onLastNameBlur}
error = {lastNameError} />
<Greetings firstName = {firstName} lastName = {lastName} />
</div>
);
}
}
export default SimpleForm;
если вы видите, у нас есть onLastNameBlur и onFirstNameBlur имеет аналогичный код. Этот пример я получил от https://github.com/suzdalnitski/medium-intro-реагировать





Как и вы, onNameChange, вы можете узнать текущий ввод с помощью e.target.name;
Вы можете использовать оператор switch для обработки различных случаев.
а как узнать текущую ошибку? у нас есть состояния firstNameError и lastNameError...