当< textarea>值通过value prop传入时，React组件无法在Chrome中验证

6pp0gazn 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(77)

我在使用Material-UI的TextField组件时偶然发现了这个问题。当在TextField上传递多行属性时，组件被设置为<textarea>，当同时传递多行和minlength属性时，minlength无法验证。我已经将这个问题缩小到<textarea>元素，在通过“value”属性传递值时也会出现同样的问题，但这只发生在Chrome和Edge中，而不是Firefox。当value作为<textarea>的子元素传入时，minlength属性也会进行验证。
下面是一个验证失败的示例：

<form onSubmit={handleSubmit}>
    <textarea minLength={5} value={textareaValue} onChange={handleTextareaChange} />
    <button type="submit">submit</button>
</form>

下面是一个测试的验证对象读数，我在其中提交了少于5个字符，这应该会失败验证：

{
    badInput: false,
    customError: false,
    patternMismatch: false,
    rangeOverflow: false,
    rangeUnderflow: false,
    stepMismatch: false,
    tooLong: false,
    tooShort: false,
    typeMismatch: false,
    valid: true,
    valueMissing: false
}

在this MDN documentation中，它说“<textarea>不支持value属性”，但在this React documentation中，它说“您可以通过传递值属性来控制文本区域”。
其他人有这个问题吗？谢谢你，谢谢！

google-chrome

来源：https://stackoverflow.com/questions/76964342/react-textarea-component-fails-to-validate-in-chrome-when-value-is-passed-in-t

1条答案

按热度按时间

gzszwxb41#

当值作为<textarea>的子级传入时，它也适用于任何浏览器。
minLength属性似乎工作正常，但只有您的textarea * 不受控制 *（没有value或onChange prop ）。这是一个缺点，但也许在您的特定情况下，也许这是你正在寻找的。
https://codesandbox.io/s/sharp-ardinghelli-rc5f63?file=/src/App.js

export default function App() {
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea minLength="5" />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

赞(0）回复(0）举报 2023-09-28

我来回答

当< textarea>值通过value prop传入时，React组件无法在Chrome中验证

1条答案

相关问题

热门标签

最新问答