OnChange传递项目文本和项目价值验证

import React, { useState } from 'react';

function ProjectForm() {
  const [projectName, setProjectName] = useState('');
  const [projectValue, setProjectValue] = useState('');
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'projectName') {
      setProjectName(value);
      validateField('projectName', value);
    } else if (name === 'projectValue') {
      setProjectValue(value);
      validateField('projectValue', value);
    }
  };

  const validateField = (field, value) => {
    let fieldErrors = {};
    if (field === 'projectName' && !value.trim()) {
      fieldErrors.projectName = '项目名称不能为空';
    }
    if (field === 'projectValue' && isNaN(value)) {
      fieldErrors.projectValue = '项目价值必须是数字';
    }
    setErrors(fieldErrors);
  };

  return (
    <form>
      <div>
        <label>项目名称：</label>
        <input
          type="text"
          name="projectName"
          value={projectName}
          onChange={handleChange}
        />
        {errors.projectName && <span>{errors.projectName}</span>}
      </div>
      <div>
        <label>项目价值：</label>
        <input
          type="text"
          name="projectValue"
          value={projectValue}
          onChange={handleChange}
        />
        {errors.projectValue && <span>{errors.projectValue}</span>}
      </div>
    </form>
  );
}

export default ProjectForm;