时间戳

首页 > 解决方案 > 丢失类名的元素

reactjs - 丢失类名的元素

问题描述

我试图通过添加一个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
  })
}

标签： reactjs

解决方案

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

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

推荐阅读