Question

React中的NewBie，所以要带有任何非技术性的文字。我必须使用给定的代码来处理表单，但是代码有些不完整，我必须在每个输入上进行验证。如果发生任何错误，将其显示在输入下方元素在span元素内。在onChange处理程序状态上得到更新，而相应的验证函数被调用

import React from "react";

class Form extends React.component{

state = { 
firstName: { value: "" }, 
LastName: { value: "" } 
};  

handleInputChange = (e, validationFun) => {
e.preventDefault();
const target = e.target;
const inputName = target.name;
const inputValue = target.value;
this.setState({
  [inputName]: {
    value: inputValue,
    ...validationFun(inputValue)
  }
});
};
render() {
return (
  <div>
    <div>
      <label>First Name</label>
      <input
        type="text"
        name="firstName"
        value={this.state.firstName.value}
        onChange={event =>
          this.handleInputChange(event, this.validatefirstName)
        }
      />
    </div>

    <div>
      <label>First Name</label>
      <input
        type="text"
        name="LastName"
        value={this.state.LastName.value}
        onChange={event =>
          this.handleInputChange(event, this.validateLastName)
        }
      />
    </div>
  </div>
);
}
validatefirstName = firstName => {
if (!firstName) {
  return {
    validateStatus: "error",
    errorMsg: "firstName may not be empty"
  };
} else if (firstName.length > 12) {
  return {
    validationStatus: "error",
    errorMsg: `firstName is too long 11 characters allowed.)`
  };
} else {
  return {
    validateStatus: "success",
    errorMsg: null
  };
}
};
validateLastName = LastName => {
if (!LastName) {
  return {
    validateStatus: "error",
    errorMsg: "LastName may not be empty"
  };
} else if (LastName.length > 12) {
  return {
    validationStatus: "error",
    errorMsg: `LastName is too long 11 characters allowed.)`
  };
} else {
  return {
    validateStatus: "success",
    errorMsg: null
  };
}
};
};

Answer 1

是的，经过大量的工作，我找到了解决方案

import React from "react";

class Form extends React.component{

state = { 
firstName: { value: "" }, 
LastName: { value: "" }
};  

handleInputChange = (e, validationFun) => {
e.preventDefault();
const target = e.target;
const inputName = target.name;
const inputValue = target.value;
this.setState({
   [inputName]: {
   value: inputValue,
   ...validationFun(inputValue)
  }
});
};
render() {
return (
 <div>
   <div>
    <label>First Name</label>
    <input
     type="text"
     name="firstName"
     value={this.state.firstName.value}
     onChange={event =>
     this.handleInputChange(event, this.validatefirstName)
    }
    />
    <span style={{ color: "red" }}>
          {this.state.firstName.errorMsg}
    </span>
   </div>

 <div>
  <label>Last Name</label>
  <input
    type="text"
    name="LastName"
    value={this.state.LastName.value}
    onChange={event =>
      this.handleInputChange(event, this.validateLastName)
    }
  />
  <span style={{ color: "red" }}>
       {this.state.LastName.errorMsg}
  </span>
 </div>
</div>
);
}
validatefirstName = firstName => {
if (!firstName) {
return {
validateStatus: "error",
errorMsg: "firstName may not be empty"
};
} else if (firstName.length > 12) {
return {
 validationStatus: "error",
 errorMsg: `firstName is too long 11 characters allowed.)`
};
} else {
  return {
  validateStatus: "success",
  errorMsg: null
  };
}
};

validateLastName = LastName => {
if (!LastName) {
return {
 validateStatus: "error",
 errorMsg: "LastName may not be empty"
};
} else if (LastName.length > 12) {
return {
 validationStatus: "error",
 errorMsg: `LastName is too long 11 characters allowed.)`
};
}  else {
 return {
 validateStatus: "success",
 errorMsg: null
  }}
 };

验证反应形式的输入

1 个答案: