如何解决未为 FluentUIReact TextField 调用 onGetErrorMessage
我正在浏览 fabric UI TextField 文档(https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield ) 。我使用以下两个处理程序尝试了几个 TextField 示例:-
- onChange
- onGetErrorMessage。
我对这两个处理程序 (https://codepen.io/nishchay271095/pen/rNyPKYY?editors=1011) 进行了几次实验:-
案例 1. 当使用两个处理程序而没有 TextField 的任何额外属性时,两个处理程序(onChange 和 onGetErrorMessage)都会被调用。
<TextField
label="Controlled TextField"
onChange={onChangeSecondTextFieldValue}
onGetErrorMessage = {onGetErrorMessageHandler}
/>
案例 2. 当使用具有“defaultValue”属性的两个处理程序时,两个处理程序(onChange 和 onGetErrorMessage)都会被调用。
<TextField
label="Controlled TextField"
defaultValue = "hello"
onChange={onChangeSecondTextFieldValue}
onGetErrorMessage = {onGetErrorMessageHandler}
/>
案例 3. 当两个处理程序都与 TextField 的 "value" 属性一起使用时,只调用了 onChange() 处理程序。
<TextField
label="Controlled TextField"
value="hello"
onChange={onChangeSecondTextFieldValue}
onGetErrorMessage = {onGetErrorMessageHandler}
/>
现在,我有以下疑问:-
- 为什么在情况 3 中没有调用 onGetErrorMessage()?
- value 和 defaultValue 属性如何影响这两个处理程序(onChange 和 onGetErrorMessage)的行为?
解决方法
为什么在情况 3 中没有调用 onGetErrorMessage()?
当您拥有 Uncontrolled Component
时,没有理由使用 value
属性和 onChange
函数,因为 TextField Component
将 defaultValue
视为初始状态并创建本地状态变量 uncontrolledValue
就像你有 value prop 一样交互。
因此,在您的情况下,您有 Uncontrolled Component
并且 value 属性是多余的。
不受控制的组件:
<TextField
defaultValue="Hello"
onGetErrorMessage={value => {
if (value === 'Foo') {
return 'Foo is not valid value';
}
}}
/>
受控组件
const [inputValue,setInputValue] = useState('Hello');
<TextField
value={inputValue}
onChange={(_,newValue) => {
if(newValue || newValue === '') {
setInputValue(newValue)
}
}}
onGetErrorMessage={value => {
if (value === 'Foo') {
return 'Foo is not valid value';
}
}}
/>
value 和 defaultValue 属性如何影响这两个处理程序(onChange 和 onGetErrorMessage)的行为?
答案在于documentation:
默认值:
文本字段的默认值。仅当文本字段是不受控制的组件时才提供此项;否则,使用 value 属性。
价值:
文本字段的当前值。仅当文本字段是您维护其当前状态的受控组件时才提供此项;否则,使用 defaultValue 属性。
完整的工作示例 Codepen。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。