Question

我有一个Input元素，我希望在表单验证失败时显示错误。

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

当用户输入的金额不正确时，我想更改＆＃34;错误＆＃34; to＆＃34; true＆＃34;。如何才能做到这一点？

我试过了：

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。道具从父组件传递到子组件作为不可变输入。

Answer 2

这不是答案，但仍然是：

这种类型的摆弄形式元素的每个可能状态（有效，无效，警告，显示工具提示，被编辑，焦点，左焦点，提交，提交失败或不等等）变得很麻烦当表格增长超过1个输入字段。

我建议使用几乎完美地与semantic-ui-react`集成的redux-form包，前提是你已经为它提供了validate函数为你做的一切。它需要一些时间来理解它的基础知识，但它真的很有价值。

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
}

希望它会有所帮助！

在Semantic UI React中动态设置Input的属性值

3 个答案: