对React Js中无效字段的输入验证

Question

在变量data中，各个值已经存储，并且数据嵌套一层。

从级别1（父级）开始，它已经显示了标题，然后它具有名为sublevel的数组，其中包含多个项目。

从子级项目开始，我将为id，email，firstName，lastName输入已经完成的字段，到目前为止一切正常。

为了使问题更清楚，我已经停止这样做了。

现在，我需要分别对每个字段实施验证（至少需要进行字段验证和电子邮件正则表达式）

注：我无权添加/删除data对象内的任何值，因为在实际应用中，它来自我无权访问的api。

因此，请帮助我如何处理各个字段的验证。通过reactstrap我正在生成如下形式，

const data = [
  {
     "Id":22383,
     "title":"Title 1",
     "quantity":5,
     "price":12,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"[email protected]",
           "ccoId":"test12",
           "firstName":"test",
           "lastName":"user",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        }
     ]
  },
  {
     "Id":22383,
     "title":"Title 2",
     "quantity":1,
     "price":5,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"[email protected]",
           "ccoId":"test23",
           "firstName":"hello",
           "lastName":"world",
           "partId":22383
        }
     ]
  }
   ]

const {Component, Fragment} = React;
const {Button, Collapse, Form, FormGroup, Input} = Reactstrap;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: []
    };
  }

  componentDidMount(){

  }
  
  render() {
    return <div> 
      {
        data.map((levelOne, i) => {
           return(
             <div key={i}>
               <h4> {levelOne.title} </h4>
                {
                  levelOne.sublevel.map((subLevel, j) => {
                   return(
                     <div key={j}> 
                      <Form inline>
                        <FormGroup>
                            <Input name="id" maxLength="50" defaultValue={subLevel.ccoId} placeholder="ccoId" />
                            <Input name="email" type="email" defaultValue={subLevel.email} placeholder="Email" />
                            <Input name="firstName" maxLength="50" defaultValue={subLevel.firstName} placeholder="firstName" />
                            <Input name="lastName" maxLength="50" defaultValue={subLevel.lastName} placeholder="lastName" />
                           
                        </FormGroup>
                        </Form>
                     </div>
                    )
                  })
                }
             </div>
           )
        })
    }
   <Button color="secondary" size="lg" disabled>Submit</Button>
    </div>;
  }

}


ReactDOM.render(<App />, document.getElementById("root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>

我在其中停留了很长时间，无法对每个单独的输入元素实施验证，因此请帮助我。

非常感谢。.>

在变量数据中，已经存储了各个值，并且数据是一级嵌套的。从级别1（父级）开始，它已经显示了标题，然后有了称为子级别的数组...

Answer 1

您可以使用输入标签中提供的onChange属性来处理输入值。同样，您也可以为其他输入元素创建onChange函数。