reactjs - 在 Semantic UI React 中动态设置输入的属性值

Question

我有一个输入元素，我想在表单验证失败时显示错误。

<Input ref="amount" error={false} />

当用户输入错误的金额时，我想将“error”更改为“true”。如何才能做到这一点？

我已经尝试过:

this.refs.amount.props.error = true;

这看起来很糟糕，但我不知道还能怎样。如果我在输入元素的定义中添加条件语句，则似乎只计算一次，然后保持不变。我需要强制更新元素吗？如果是这样，怎么办？

Answer 1

是的，可以在提交表单时验证输入。您所需要做的就是跟踪输入值并使用与 @SajithDilshan 相同的方法来处理输入错误。

this.state = {
  error: false,
  value: ''
}
...
render(){
  return
    ...
    <Input
      ref="amount" 
      value={this.state.value}
      error={this.state.error}
    />
    ...

}

然后 onSubmit 应该如下所示:

onSubmit(e){
  const isError = this.state.value === '';
  this.setState({error: isError});
  // rest of your logic
}

希望对你有帮助!