Question

我有一个对话框窗口（div），其中有一个窗体和一个对象，该对象保存字段中的数据，如果用户忘记填写其中一个字段，则该字段的边框会变为红色。我的问题是，如果用户关闭对话框窗口并重新打开它，则红色边框仍然存在，并且该对象保存了关闭之前的信息。我不确定如何/是否需要清除本地存储，或者是否有更好的解决方案，因此每次关闭窗口时，数据结构和样式都是默认的。我将Bootstrap用于组件。

import React from 'react';

const variables = {
  varA: '', varB: '', varC: ''
};
let emptyFields = [];

const border = {
  borderColor: '#C70039',
};

const submitForm = () => {
  emptyFields = [];
  if (Object.values(variables).includes('')) {
    for (const [key, value] of Object.entries(variables)) {
      if (value === '') {
        emptyFields.push(key);
      }
    }
  }
  return emptyFields;
};

const Form = empty => (
  <div>
    <p className="text-primary">Please provide information in all of the fields.</p>
    <form>
      <div className="form-group mt-4" >
        <label htmlFor="formGroupExampleInput">Var A </label>
        <input type="text" className='form-control' id="varA" required onChange={(e) => { variables.varA = e.target.value; } } />
      </div>
      <div className="form-group">
        <label htmlFor="formGroupExampleInput">Var B </label>
        <input type="text" id="varB" className='form-control' style={empty.empty.includes('varB') ? border : null} onChange={(e) => { variables.varB = e.target.value; }}/>
      </div>
      <div className="form-group">
        <label htmlFor="formGroupExampleInput">Var C </label>
        <input type="text" className="form-control" id="varC" style={empty.empty.includes('varC') ? border : null} onChange={(e) => { variables.varC = e.target.value; }}/>
      </div>
    </form>
    <button className="btn btn-primary" onClick={submitForm}>Submit</button>
  </div>
);

const CompleteForm = () => <Form empty = {emptyFields} />;

export default CompleteForm;

关闭窗户时清理所有设计变更

0 个答案: