在 React 组件中使用伪类

Posted 2023-02-22

【中文标题】在 React 组件中使用伪类

【英文标题】：Using pseudo-classes in React component

【发布时间】：2017-05-07 10:06:27

【问题描述】：

在我的 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 />

【问题讨论】：

className 应该是一个字符串。我认为它可能认为 className 未定义，因为 showInvalid 未定义。

查看我的更新。看起来它不应该进入 className。

啊，我脑子里放屁的原因……没看到假人。我的坏

看起来你不能在内联样式中使用伪类。这基本上就是你正在做的事情。 ***.com/questions/28269669/…。从来没有出现过

不幸的是，我也得出了这个结论！无赖！

【参考方案1】：

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

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

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

【讨论】：

查看我的更新。研究表明，类名中没有使用伪类。

【参考方案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>

【讨论】：

这是一个有趣的想法！我会试一试，让你知道。谢谢！

当然，没问题。

我不能让它工作，但它应该。我们只是将正则表达式放入模式中，对吗？例如，如果我想确保它是一个带两位小数的数字，我应该能够使用 pattern="/^[0-9]+(\.[0-9][0-9]?)?$ /"，对吗？

我使用input 对小提琴进行了更新，将type 设置为number，最多允许两位小数。

对不起，我的第一个模式是错误的，这应该可以[0-9]+([\,|\.][0-9]+)?。查看代码 sn-p。