尝试将Enum[ ]从子组件传递到父组件

在React中，父组件向子组件传递数据是通过props实现的。但是，子组件向父组件传递数据是相对复杂一些的。在这种情况下，可以使用回调函数来实现子组件向父组件传递数据。

首先，在父组件中定义一个回调函数，用于接收子组件传递的数据。然后，将这个回调函数作为props传递给子组件。在子组件中，当需要向父组件传递数据时，调用这个回调函数并传递数据作为参数。

下面是一个示例代码：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [selectedEnum, setSelectedEnum] = useState(null);

  const handleEnumChange = (selectedEnum) => {
    setSelectedEnum(selectedEnum);
  };

  return (
    <div>
      <ChildComponent onEnumChange={handleEnumChange} />
      <p>Selected Enum: {selectedEnum}</p>
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ onEnumChange }) => {
  const handleEnumSelection = (event) => {
    const selectedEnum = event.target.value;
    onEnumChange(selectedEnum);
  };

  return (
    <div>
      <select onChange={handleEnumSelection}>
        <option value="enum1">Enum 1</option>
        <option value="enum2">Enum 2</option>
        <option value="enum3">Enum 3</option>
      </select>
    </div>
  );
};

export default ChildComponent;

在上面的代码中，父组件ParentComponent中定义了一个handleEnumChange回调函数，用于接收子组件传递的数据。这个回调函数被作为props传递给子组件ChildComponent。在子组件中，当select元素的值发生变化时，调用handleEnumSelection函数，并将选中的枚举值作为参数传递给父组件的回调函数onEnumChange。

这样，当子组件中的select元素的值发生变化时，父组件的selectedEnum状态会更新，并在父组件中显示出来。

这种方式可以实现子组件向父组件传递数据，适用于各种场景，例如表单提交、用户选择等。

腾讯云相关产品和产品介绍链接地址：