Reactjs 在语义UI中动态设置输入的属性值

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

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

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

对输入使用

onChange（）

方法，如下所示

<Input ref="amount" onChange={this.onInputChange} error={this.state.error} />

请注意，这将在状态中添加

error

属性

---

此外，您不应在组件内修改

道具。道具是作为不可变输入从父组件传递到子组件的过程。
这不是确切的答案，但仍然是：

当表单超过1个输入字段时，这种对表单元素的每个可能状态（有效、无效、警告、显示工具提示、已编辑、处于焦点、左焦点、已提交、提交失败或未提交等）的摆弄会变得非常麻烦

我建议使用
redux-form
包，它几乎完美地集成了语义ui-react`并提供了验证功能，其他功能都可以为您完成。理解它的基本原理需要一些时间，但确实是值得的。
是的，提交表单时可以验证输入。
您只需跟踪输入值，并使用与@SajithDilshan相同的方法处理输入错误

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

}

希望这会有帮助
 谢谢。我看你的例子很有效。但是，我试图在提交表单时验证输入。这个概念应该是相同的，但是当我在输入上设置state时，它似乎没有更新元素。是否有一些要求必须在onChange函数中完成？是否可以发布组件的代码以更好地了解您的问题？此外，您是否正在执行后端验证？我现在看到我的问题是，我试图在输入元素本身上调用“setState”，而不是在父组件中。谢谢，我现在更明白了。谢谢。这是一个非常简单的应用程序，只是为了让自己熟悉React，但我会记住它。
onInputChange = (e) => {
    if (e.target.value === "") { // logic to validate the input
        this.setState({error: true});
    } else {
        this.setState({error: false});
    }
}

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

}

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