Я пытаюсь установить условие для значения входного компонента в реакции (MERN)

Question

Я работаю над клоном Instagram в MERN, чтобы практиковаться и учиться. Форма регистрации имеет ввод, и вы можете зарегистрироваться по электронной почте или по номеру мобильного телефона. Я пытаюсь сделать тернарный оператор в значении входного компонента, но при запуске кода получаю ошибки.

Проверка функции электронной почты:

const validateEmail = (userOption) => {
    let checker = /\S+@\S+\.\S+/;
    return checker.test(userOption);
}

Входной компонент

<label htmlFor="email" />
<input type="text"
    name="email"
    value= { validateEmail(registerOption) ? {user.email} : {user.mobile} }
    onChange={onChangeHandler}
    placeHolder="Mobile Number or Email" />

Он не распознает user.email или user.mobile, даже если он у меня без троичного. (только для электронной почты или только для мобильных устройств) Я также не уверен, нужно ли мне менять htmlFor.

Спасибо!

Answer 1

Как объяснялось в других ответах, вам не нужно использовать {} для повторного переноса user.email или user.mobile. Однако ваш onChangeHandler будет обновлять только поле email, а не поле mobile, так как вы обновляете на основе event.target.name.

Я бы посоветовал вам проверять ввод при нажатии кнопку вместо переключения значения <input /> при каждом вводе пользователя.

Добавьте состояние (скажем, userInput) и обновите его в onChangeHandler.

const [userInput, setUserInput] = useState('');
const onChangeHandler = (e) => {
    setUserInput(e.target.value);
    ....

При нажатии кнопки «Зарегистрироваться / Войти» мы проверяем userInput и действуем соответствующим образом.

const onSubmit = () => {
   const isEmail = validateEmail(userInput);
   if (isEmail) setUser({...user, email: userInput});
   else setUser({...user, mobile: userInput});
   // proceed to signin / signup or show an error message
}

Ваш ввод соответственно изменится на

<input
    type="text"
    value={userInput}
    onChange={onChangeHandler}
    placeHolder="Mobile Number or Email"
/>

В качестве альтернативы

Если вы хотите обновлять user.email или user.mobile при каждом вводе пользователя, вы можете использовать следующий метод onChangeHandler -

const onChangeHandler = (e) => {
    const userInput = e.target.value;
    const isEmail = validateEmail(userInput);
    if (isEmail) setUser({ ...user, email: userInput, mobile: '' });
    else setUser({ ...user, mobile: userInput, email: '' });
}

Ваш ввод будет соответственно изменить на

<input
    type="text"
    value={user.email || user.mobile}
    onChange={onChangeHandler}
    placeHolder="Mobile Number or Email"
/>

Answer 2

Здесь две вещи: -

1. Удалите {} вокруг user.email и user.mobile.
2. Не зависит от атрибута name поля ввода для вашего сценарий. Пусть это будет что-то вроде «контакта», не связанного с вашим кодом js. Также напрямую используйте user.email в качестве параметра функции validationEmail.

const onChangeHandler = (e) => {
        const {value} = e.target;
        const isValidEmail = validateEmail(value);
        const user = isValidEmail?{...user,email:value}:{...user,mobile:value}
        setUser(user);
    }

Проверка функции электронной почты:

const validateEmail = (userOption) => {
    let checker = /\S+@\S+\.\S+/;
    return checker.test(userOption);
}

Входной компонент

<label htmlFor="contact" />
<input type="text"
    name="contact"
    value= {validateEmail(user.email)?user.email:user.mobile}
    onChange={onChangeHandler}
    placeHolder="Mobile Number or Email" />

Поведение: - Если адрес электронной почты действителен, в поле ввода отображается это значение. Как только он станет недействительным, в поле ввода будет отображаться номер мобильного телефона в качестве значения. Посмотрите, это то, что вы хотели!

Answer 3

Опора value должна выглядеть так:

value={ validateEmail(registerOption) ? user.email : user.mobile }

Использование оператора {user.email} будет проанализировано как

{ // scope
  user.email // expression
} 

Answer 4

{} - это специальный синтаксис, который используется для вычисления выражения JS.

Поэтому, когда вы пишете value= { validateEmail(registerOption) ? {user.email} : {user.mobile} }, вам не нужно заключать user.email и user.mobile в {} снова, поскольку они будут рассматриваться как значение JS, поскольку они уже заключены в фигурные скобки.