没有为 FluentUIReact TextField 调用 onGetErrorMessage答案

【问题标题】：onGetErrorMessage not being called for FluentUIReact TextField没有为 FluentUIReact TextField 调用 onGetErrorMessage
【发布时间】：2021-09-01 21:26:10
【问题描述】：

我正在浏览 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）的行为？

【问题讨论】：

标签： reactjs fluent-ui fluentui-react office-fabric

【解决方案1】：

为什么在情况 3 中没有调用 onGetErrorMessage()？

当您拥有Uncontrolled Component 时，没有理由使用value 属性和onChange 函数，因为TextField Component 将defaultValue 视为初始值，它会创建本地状态变量uncontrolledValue，它的交互方式就像您拥有价值道具。

所以，在你的情况下，你有 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。

【讨论】：