2024年5月7日发(作者：)

react 获取子组件的表单的校验结果

在React中，如果想要获取子组件的表单校验结果，通常有几种

做法：

1. 通过 props 传递校验结果

可以在子组件中定义一个方法，比如叫做

`getValidationResult` ，用来返回表单校验的结果。然后在父组件

中通过 props 的方式获取这个结果。

子组件：

```jsx

class MyForm extends ent {

// 省略其他代码...

getValidationResult() {

return teFields();

}

render() {

// 省略其他代码...

}

}

```

父组件：

```jsx

class MyPage extends ent {

- 1 -

handleFormSubmit = () => {

const validationResult =

idationResult();

if (d) {

// 校验通过，继续提交表单

} else {

// 校验未通过，做出处理

}

};

render() {

return (

);

}

}

```

2. 通过 Context 传递校验结果

可以在子组件中定义一个 Context ，用来存储表单校验的结果。

然后在需要获取校验结果的组件中使用 Context API 获取。

- 2 -

子组件：

```jsx

const FormContext = Context();

class MyForm extends ent {

// 省略其他代码...

getValidationResult() {

return teFields();

}

render() {

return (

value={idationResult()}>

{/* 省略其他代码 */}

);

}

}

```

父组件：

```jsx

class MyPage extends ent {

render() {

- 3 -

return (

);

}

}

```

以上两种方法都是比较常见的获取子组件表单校验结果的方法。

具体选择哪种方法，可以根据实际情况来决定。

- 4 -