丢失类名的元素

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

当我点击按钮测试验证时，“error-required”类被添加到输入中，但只要我输入任何内容，它就会丢失类。

这是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

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

如果您的表单有一个名为“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 对象以跟踪字段的状态。