javascript - 如何在 React 中包含基于状态的表单字段属性？

Question

我正在尝试在 React 中创建一个可访问的表单，并且我需要根据字段的状态(即，如果它有与之关联的错误)切换属性 aria-scribedby 。

我知道如何切换属性的值，但对于 WCAG，这种类型的存在但为空的属性将会失败。整个属性需要完全存在或完全不存在。我尝试的任何内联操作都会引发错误并破坏渲染。

举个例子，这是我一直在尝试的:

<label>
    <input type="text" name="someName" ref="someRef" {!this.state.isValid ? aria-describedby="helperText" : ''} required />
    <p id="helperText">Helper text for this form field.</p>
</label>

不过，aria-scribedby 的空属性值是无效的。

有什么办法可以达到这个目的吗？

Answer 1

像这样传播它:

<input type="text" 
     name="someName" 
     ref="someRef" 
     {... !this.state.isValid && {'aria-describedby': 'helperText'} } 
     required />

这基本上是spread operator用法。