元素丢失className

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
  });
}

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

{key：'name'，name：'name'，type：'text'，label：'Full Name'，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

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

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

考虑进行以下调整：

// 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对象以跟踪字段的状态。