Question

我试图呈现一个元素，其值取决于状态变量。我想对元素的内容进行验证。该怎么做？

例如： {Number(this.state.projectPrice).toFixed(2)}

如果项目价格低于5，我想应用验证，它会显示显示错误消息并禁用提交按钮。

Answer 1

我猜您的组件是受控组件。在这种情况下，可以在handle函数中添加验证器。例如：

handleChange(event) {
    // in the if, you can set an error message and choose not to update the value
    if(event.target.value > 5){ this.setState({error:"value greater than 5"});
    // if number is less than 5 only update
    else {this.setState({value: event.target.value});}
}

...

还在提交功能中，您还可以检查是否有上述任何值，因此，如果值大于5或没有值，则无法按提交按钮

=========

基于评论：

您可以编写一个类似这样的函数

validator = () => {
 if(Number(this.state.projectPrice) < 5){
  return Number(this.state.projectPrice).toFixed(2)
 } else {
  return "error"
 }
}

以及return语句{this.validator()}

在React中为<p>元素添加验证

1 个答案: