Реагировать на начальное состояние при проверке ввода - PullRequest
Новая
       3

Реагировать на начальное состояние при проверке ввода

0 голосов
/ 09 ноября 2019

Я больше часа пытаюсь понять, как установить начальное состояние на входе проверки.

Вот мой пример кода: 

const {useReducer, useEffect, useState} = React;

const BasicInput = props => {
	const [isValidated, setIsValidated] = useState(true)

	useEffect(() => {
			setIsValidated(props.validation)
      console.log(props.validation)
	},[props.validation])
	
	return (
		<div className='input-box'>			
			<input
        className={`${!isValidated && 'not-valid'}`}
				type='text'
				name={props.name}
				required
				onChange={props.handleInput}
			/>
		</div>
	)
}

function contactFormReducer(state, action) {
	switch (action.type) {
		case 'email':
			return {...state, name: {
				value: action.payload,
				isValidate: /^.+(@).*\.[a-z]{2}$/.test(action.payload)
			}}
	}
}

const ExampleForm = () => {
	const [formData, dispatch] = useReducer(contactFormReducer, {
		name: {
			value: null,
			isValidate: false
		}
	})

	return (	
					<BasicInput						
						name='email'
						label='label'
						handleInput={e => dispatch({type: 'email', payload: e.target.value})}
						validation={formData['name'].isValidate}
					/>
	)
}

ReactDOM.render(
  <ExampleForm title="Example using simple hook:" />,
  document.getElementById("root")
);
.not-valid {
	border: 2px solid red;
	color: red!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>

Как видите, исходное состояние ввода установлено как недопустимое, что нормально, но выглядит ужасно, как для отображаемой формыв первый раз. Мне интересно, как не установить стиль not-valid и в то же время сохранить проверку на false при первом рендереМне нужно свежее понимание этого, любая помощь и совет, которые очень ценятся.

ОБНОВЛЕНИЕ

Сразу после того, как я сделал это сообщение, я нашел решение, которое вполне устраивает, но все жеЯ не доволен производительностью: 

const {useReducer, useEffect, useState} = React;

const BasicInput = props => {
	const [isValidated, setIsValidated] = useState(true)
  const [isFocus, setIsFocus] = useState(false)
  
  useEffect(() => {
		if (isFocus) {
			setIsValidated(props.validation)
      console.log(props.validation)
		}
	})

	const handleFocus = () => {		
		setIsFocus(true)
	}
	
	return (
		<div className='input-box'>			
			<input
        className={`${!isValidated && 'not-valid'}`}
				type='text'
				name={props.name}
				required
				onChange={props.handleInput}
        onFocus={handleFocus}
			/>
		</div>
	)
}

function contactFormReducer(state, action) {
	switch (action.type) {
		case 'email':
			return {...state, name: {
				value: action.payload,
				isValidate: /^.+(@).*\.[a-z]{2}$/.test(action.payload)
			}}
	}
}

const ExampleForm = () => {
	const [formData, dispatch] = useReducer(contactFormReducer, {
		name: {
			value: null,
			isValidate: false
		}
	})

	return (	
					<BasicInput						
						name='email'
						label='label'
						handleInput={e => dispatch({type: 'email', payload: e.target.value})}
						validation={formData['name'].isValidate}
					/>
	)
}

ReactDOM.render(
  <ExampleForm title="Example using simple hook:" />,
  document.getElementById("root")
);
.not-valid {
	border: 2px solid red;
	color: red!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>

Это решение будет перерисовывать мой компонент ввода каждый раз, когда происходит событие onChange. Есть идеи как это предотвратить?

...