Reactjs 我能'；无法从React-Typescript组件上的onChange获取结果

我正在使用在应用程序中创建自定义组件。我的子组件由反应颜色的两个组件组成：CirclePicker和ChromePicker。两者都将colorPicker状态变量作为值共享。所以，如果一个改变了他的价值，另一个也会改变

正如您在我的子组件上看到的，我放置了一个不可见的输入，它共享相同的colorPicker值（我不知道它是否正确）。我的目标是：当输入改变时，我可以做一些事情，例如：警报（‘颜色改变’）（这是我在handleOnChange函数中的代码）

子组件：

从“React”导入React；
从“反应颜色”导入{CirclePicker，ChromePicker}；
从“/../Icon/Icon”导入{Icon}；
导入“./color picker.scss”；
导出接口ColorPickerProps{
onChange:（值：string）=>void；
}
导出函数ColorPicker（道具：ColorPickerProps）{
const[colorPicker，showColorPicker]=React.useState（false）；
const[finalColor，changeColor]=React.useState（'#fff'）；
函数handleOnChange（）{
警报（“颜色改变”）；
道具更换（最终颜色）；
}
返回(
handleOnChange}style={{display:“none”}/>
changeColor（colore.hex）}
颜色={[
“#004de8”，
“#2ecc71”，
#ff9300",，
"62708b",，
“#ff003a”，
"20396a"
]}
circleSize={24}
>
，但无论我做什么，都不会调用handleOnChange函数，也看不到警报

此外，我的目标是在父级中使用此组件，大致如下所示：
**父组件：**

this.state.color=e}/>

这样，我就可以在父状态下选择颜色

我无法在子函数中获取任何内容，也无法在父组件上更新状态

有人能帮我吗？我是React的新用户：（
useCallback
可能是一个不错的选择，请参考此，然后

从“React”导入React；
从“react dom”导入react dom；
从“反应颜色”导入{CirclePicker，ChromePicker}；
导入“/styles.css”；
功能应用程序（道具）{
const[colorPicker，showColorPicker]=React.useState（false）；
const[finalColor，changeColor]=React.useState（“#fff”）；
const handleColorChange=React.useCallback（console.log（“通过回调工作”）；
返回(
changeColor（colore.hex）}
颜色={[
“#004de8”，
“#2ecc71”，
“#ff9300”，
“#62708b”，
“#ff003a”，
“#20396a”
]}
circleSize={24}
/>
{颜色选择器(
changeColor（colore.hex）}
disableAlpha={true}
/>
) : (
""
)}
{finalColor}

);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
useCallback
可能是一个不错的选项，请参阅此，然后

从“React”导入React；
从“react dom”导入react dom；
从“反应颜色”导入{CirclePicker，ChromePicker}；
导入“/styles.css”；
功能应用程序（道具）{
const[colorPicker，showColorPicker]=React.useState（false）；
const[finalColor，changeColor]=React.useState（“#fff”）；
const handleColorChange=React.useCallback（console.log（“通过回调工作”）；
返回(
changeColor（colore.hex）}
颜色={[
“#004de8”，
“#2ecc71”，
“#ff9300”，
“#62708b”，
“#ff003a”，
“#20396a”
]}
circleSize={24}
/>
{颜色选择器(
changeColor（colore.hex）}
disableAlpha={true}
/>
) : (
""
)}
{finalColor}

);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
解释
输入的值链接到状态。因此，当状态更改时，值会更改。但是，没有对输入触发任何事件。您试图对未触发任何事件的输入使用react；意思是
handleOnChange
从未调用过So
props。onChange
从未调用过

解决方案
用于侦听输入的值/状态值何时更改。如果使用，则可以在组件装载时停止运行
props.onChange
。请查看

import*as React from“React”；
从“react”导入{FunctionComponent、useState、useffect、useRef}；
从“react dom”导入{render}；
从“反应颜色”导入{CirclePicker，ChromePicker}；
常量颜色=[
“#004de8”，
“#2ecc71”，
“#ff9300”，
“#62708b”，
“#ff003a”，
“#20396a”
];
导出接口ColorPickerProps{
onChange:（值：string）=>void；
}
常量颜色选择器：FunctionComponent=（{onChange}）=>{
const[colorPicker，showColorPicker]=useState（false）；
const[finalColor，changeColor]=useState（“#fff”）；
const componentMounted=useRef（true）；
useffect（（）=>{
if（组件安装。当前）{
componentMounted.current=false；
console.log(
“当使用useRef装载组件时，不要运行props.onChange”
);
}否则{
onChange（最终颜色）；
警报（“最终颜色通过useEffect更改”）；
}
return（）=>未定义；
}，[最终颜色]；
返回(
changeColor（colore.hex）}
颜色={colors}
circleSize={24}
/>


showColorPicker（！colorPicker）}>单击我
{颜色选择器&&(
changeColor（colore.hex）}
disableAlpha={true}
/>
)}
);
};
const rootElement=document.getElementById（“根”）；
渲染(
{
console.log（“onChange”）；
}}
/>,
根元素
);
说明
输入的值链接到状态。因此，当状态更改时，值也会更改。但是，没有对输入触发任何事件。您试图对没有触发任何事件的输入使用react
import React from "react";
import ReactDOM from "react-dom";
import { CirclePicker, ChromePicker } from "react-color";

import "./styles.css";

function App(props) {
  const [colorPicker, showColorPicker] = React.useState(false);
  const [finalColor, changeColor] = React.useState("#fff");

  const handleColorChange = React.useCallback(console.log("Work via callback"));
  return (
    <div className="relative-position">
      <input value={finalColor} onChange={console.log("Work directly")} />
      <input value={finalColor} onChange={handleColorChange} />
      <CirclePicker
        color={finalColor}
        onChangeComplete={colore => changeColor(colore.hex)}
        colors={[
          "#004de8",
          "#2ecc71",
          "#ff9300",
          "#62708b",
          "#ff003a",
          "#20396a"
        ]}
        circleSize={24}
      />
      {colorPicker ? (
        <span className="chrome-picker">
          <ChromePicker
            color={finalColor}
            onChangeComplete={colore => changeColor(colore.hex)}
            disableAlpha={true}
          />
        </span>
      ) : (
        ""
      )}
      <p>{finalColor}</p>
    </div>
  );
}

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

import * as React from "react";
import { FunctionComponent, useState, useEffect, useRef } from "react";
import { render } from "react-dom";
import { CirclePicker, ChromePicker } from "react-color";

const colors = [
  "#004de8",
  "#2ecc71",
  "#ff9300",
  "#62708b",
  "#ff003a",
  "#20396a"
];

export interface ColorPickerProps {
  onChange: (value: string) => void;
}

const ColorPicker: FunctionComponent<ColorPickerProps> = ({ onChange }) => {
  const [colorPicker, showColorPicker] = useState(false);
  const [finalColor, changeColor] = useState("#fff");
  const componentMounted = useRef(true);

  useEffect(() => {
    if (componentMounted.current) {
      componentMounted.current = false;
      console.log(
        "Don't run props.onChange when the component mounts with useRef"
      );
    } else {
      onChange(finalColor);
      alert("finalColor changed via useEffect");
    }
    return () => undefined;
  }, [finalColor]);

  return (
    <div className="relative-position">
      <input type="text" value={finalColor} style={{ display: "none" }} />
      <CirclePicker
        color={finalColor}
        onChangeComplete={colore => changeColor(colore.hex)}
        colors={colors}
        circleSize={24}
      />
      <br />
      <button onClick={() => showColorPicker(!colorPicker)}>click me</button>
      {colorPicker && (
        <span className="chrome-picker">
          <ChromePicker
            color={finalColor}
            onChangeComplete={colore => changeColor(colore.hex)}
            disableAlpha={true}
          />
        </span>
      )}
    </div>
  );
};

const rootElement = document.getElementById("root");
render(
  <ColorPicker
    onChange={() => {
      console.log("onChange");
    }}
  />,
  rootElement
);