我花了一个多小时努力解决如何在验证输入中设置初始状态。
这是我的代码示例：
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,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,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事件时，此解决方案将重新呈现我的输入组件。知道如何预防吗？