0

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

  1. 改变
  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 的“值”属性的两个处理程序时，仅调用了 onChange() 处理程序。

    <TextField
        label="Controlled TextField"
        value="hello"
        onChange={onChangeSecondTextFieldValue}
        onGetErrorMessage = {onGetErrorMessageHandler}
      />

现在，我有以下疑问：-

  1. 为什么在案例 3 中没有调用 onGetErrorMessage()？
  2. value 和 defaultValue 属性如何影响这两个处理程序（onChange 和 onGetErrorMessage）的行为？
4

1 回答 1

1

为什么在案例 3 中没有调用 onGetErrorMessage()？

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

因此，在您的情况下，您拥有Uncontrolled Component并且重视财产是多余的。

不受控制的组件：

<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）的行为？

答案在于文档：

默认值：

文本字段的默认值。仅当文本字段是不受控制的组件时才提供；否则，使用 value 属性。

价值：

文本字段的当前值。仅当文本字段是您保持其当前状态的受控组件时才提供此信息；否则，使用 defaultValue 属性。

完整的工作示例Codepen。

于 2021-06-22T20:19:17.873 回答