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

Question

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

我知道如何切换属性的值，但是对于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-describedby的空属性值无效。

有没有办法实现这个目标？

Answer 1

就像这样传播：

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

这基本上是spread operator用法。