Question

我正在尝试通过添加className在表单字段中显示错误。这是渲染功能：

render() {
  return (
    <div className="row row--no-margin">
      <button onClick={this.validate}>Test validation</button>
      {
        this.props.model.map( (field, index) => {
          return this.renderTextField(field);
        });
      }
    </div>
  );
}

这是renderTextField函数：

renderTextField(field, index) {

  let inputClassNames = 'form-control';
  if (this.state.errors.indexOf(field.name) !== -1) {
    inputClassNames += ' error-required';
  }

  return (
    <div className={field.wrapperClassName} key={field.key}>
      <label className="field-label">{field.label}</label>
      <input 
        type="text"
        name={field.name} 
        ref={field.name}
        className={inputClassNames} 
        onChange={this.handleChange}
        value={this.state[field.name]}
      />
    </div>
  ); 
}

当我单击按钮以测试验证时，将“必需的错误”类添加到输入中，但是一旦我键入任何内容，它将丢失该类。

这是onChange函数：

handleChange(event) {
  this.setState({
    [event.target.name] : event.target.value
  });
}

该字段从一个对象获取其数据：

{ 键：“名称”，名称：“名称”，类型：“文字”，标签：“全名”， wrapperClassName：'col-md-6'， }

我想念什么吗？

编辑：

validate功能：

validate() {

  let errors = [];

  this.props.model.map((m, index) => {
    if(!this.state[m.name]){
      errors.push(m.name);
    }
  });

  this.setState({
    errors: errors
  })
}

Answer 1

我建议将表单的“字段状态”与“验证状态”分开，以避免在名称为“错误”的字段的情况下发生潜在冲突。

如果您的表单具有名为“错误”的字段，则更改其值将导致您的验证状态被替换，并会产生错误/意外结果。

请考虑进行以下调整：

// in renderTextField() use this.state.form[field.name]

<input 
  type="text"
  name={field.name} 
  ref={field.name}
  className={inputClassNames} 
  onChange={this.handleChange}
  value={this.state.form[field.name]} 
  />

在handleChange(event)中考虑将其修改为：

handleChange(event) {

const form = { ...this.state.form, [event.target.name] : event.target.value }

this.setState({
  form : form
})
}

请注意，您还需要初始化组件状态以包括/定义form对象以跟踪字段的状态。

元素丢失className

1 个答案: