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类中添加“invalid”但它没有用。

这是我尝试的没有结果：

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

更新：

对伪类进行更多的研究，他们不会进入课堂。所以在HTML中，输入字段只显示如下：

<input name"someProperty" invalid />

Answer 1

您可以在import { myModule } from 'myModule';元素上使用pattern属性。

When an element is invalid

该元素匹配：无效的CSS伪类;这将允许您将特定样式应用于无效元素。类似地，有效元素匹配：valid pseudo-class ....

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

<input>

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;
}

Answer 2

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

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

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

在React组件中使用伪类

2 个答案: