如何在React中通过点击事件从Newfield调用Form内的Optionscheck函数？

开发者阿泽

2026-8-23

解决子组件调用父组件函数的问题

要实现Newfield组件点击事件触发Form组件内部的Optionscheck函数，核心是通过props传递函数的方式实现父子组件通信，同时先修正代码里的基础语法错误，具体如下：

1. 修正基础语法问题

Newfield组件缺少return语句，无法渲染JSX内容
Form组件的导出语法错误，export default const不符合规范，需调整为正确的组件定义方式
修复label标签的拼写错误（原代码写为lable），并添加htmlFor属性关联对应的input，符合React规范

2. 通过props传递父组件函数

父组件Form将内部定义的Optionscheck函数作为props传递给子组件Newfield，子组件接收后绑定到点击事件上。

修正后的完整代码

import React from 'react';

// 子组件：接收父组件传递的回调函数
const Newfield = ({ onCheck }) => {
  return (
    <div className="form-check">
      <input 
        className="form-check-input" 
        type="checkbox" 
        value="" 
        id="options-check" 
        onClick={onCheck} 
      />
      <label className="form-check-label" htmlFor="options-check">
        Options
      </label>
    </div>
  );
};

// 父组件：定义函数并通过props传递给子组件
export default function Form() {
  const Optionscheck = () => {
    console.log("Trigger!");
  };

  return (
    <div>
      <div className="form">
        <input className="form-control" type="text" />
      </div>
      {/* 把父组件的函数作为props传给子组件 */}
      <Newfield onCheck={Optionscheck} />
    </div>
  );
}