在 React 组件中使用伪类

Question

在我的 React 组件中，我有一个包含多个输入字段的表单。在我正在使用的 CSS 类中，有一个“无效”伪类，如果它的值无效，它应该突出显示该字段。目前，输入字段没有在我的组件中定义任何类。他们使用来自 CSS 文件的默认样式。

class MyForm extends Component {

   render() {

      return(

         // There's more code here. Not showing to keep things simple

         <input type="text" name="someProperty" value={myObject.someProperty} onChange={e => this.someFunction(e)} />

      );
   }

}

我如何实际使用它——意思是，如何将输入字段设置为无效？我尝试简单地将“无效”添加到它的 CSS 类中，但它不起作用。

这是我尝试过的，但没有结果：

<input type="text" name="someProperty" className={showInvalid} value={myObject.someProperty} onChange={e => this.someFunction(e)} />

更新：

对伪类进行更多研究，它们不会进入类。所以在 HTML 中，输入字段会简单地如下所示：

<input name"someProperty" invalid />

Answer 1

如果我理解正确，那就是你要找的东西

className={`${this.state.showInvalid} ? 'invalidCssClassName' : 'nonInvalidCssClassName'`}

这意味着您应该将负责评估类名的值存储在某个地方（状态或道具）。在这种情况下，当 showInvalid 被评估为 true 时，CSS 类将是 invalidCssClassName 否则 nonInvalidCssClassName

Answer 2

您可以只在input 元素上使用pattern 属性。

When an element is invalid

元素匹配 :invalid CSS 伪类；这将允许您将特定样式应用于无效元素。同样，有效元素匹配 :valid 伪类....

...所有<input> 元素都可以使用pattern 属性进行验证。此属性需要区分大小写的正则表达式作为其值...

var NumberInput = React.createClass({
  render: function() {
    return <input type="number" pattern="[0-9]+([\,|\.][0-9]+)?" step="0.01" title="This should be a number with up to 2 decimal places." placeholder="Price" />;
  }
});

ReactDOM.render(
  <NumberInput />,
  document.getElementById('container')
);

input:invalid {
  background-color: #ff3333;
}

input:valid {
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>