在语义 UI React 中为输入动态设置属性值

Question

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

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

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

我试过：

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

这看起来很糟糕，但我不确定还有什么其他的。如果我在 Input 元素的定义中添加一个条件语句，它似乎只计算一次然后保持不变。我需要强制更新元素吗？如果可以，怎么做？

Answer 1

在输入上使用 onChange() 方法，如下所示。

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

之后在您的组件中实现 onInputChange() 方法，如下所示。

onInputChange = (e) => {
    if (e.target.value === "") { // logic to validate the input
        this.setState({error: true});
    } else {
        this.setState({error: false});
    }
}

请注意，这会将 error 属性添加到状态。

此外，您不应在组件内修改 props。 Props 作为不可变输入从父组件传递到子组件。

Answer 2

这不完全是答案，但仍然是：

这种对表单元素的每种可能状态（有效、无效、警告、显示工具提示、已编辑、处于焦点、左焦点、已提交、提交失败与否等）的摆弄在以下情况下变得很麻烦表单超出了 1 个输入字段。

我建议使用 redux-form 包，它几乎完美地集成了 semantic-ui-react`，并且只要你为它提供了验证函数，它就会为你完成其他所有事情。了解它的基础知识需要一些时间，但确实物有所值。

Answer 3

是的，可以在提交表单时验证输入。您只需要跟踪输入值并使用与@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
}

希望对您有所帮助！

在语义 UI React 中为输入动态设置属性值

Dynamically set a property value for an Input in Semantic UI React

reactjs

semantic-ui

semantic-ui-react

在语义 UI React 中为输入动态设置 属性 值

Dynamically set a property value for an Input in Semantic UI React

reactjs

semantic-ui

semantic-ui-react

在语义 UI React 中为输入动态设置属性值