未为 FluentUIReact TextField 调用 onGetErrorMessage

问题描述

我正在浏览 fabric UI TextField 文档(https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield ) 。我使用以下两个处理程序尝试了几个 TextField 示例：-

1. onChange
2. 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}
      />

现在，我有以下疑问：-

1. 为什么在情况 3 中没有调用 onGetErrorMessage()？
2. 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。