reactjs - 我无法从 React Typescript 组件上的 onChange 获得结果

Question

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

正如您在我的子组件中看到的那样，我放置了一个共享相同colorPicker值的不可见输入（我不知道这样做是否合适）。我的目标是：当输入发生变化时，我可以做一些事情，例如：alert('COLOR CHANGED')（这是我在handleOnChange函数中的代码）

子组件：

import React from 'react';
import { CirclePicker, ChromePicker } from 'react-color';
import { Icon } from './../Icon/Icon';
import './color-picker.scss';

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

export function ColorPicker(props: ColorPickerProps) {
  const [colorPicker, showColorPicker] = React.useState(false);
  const [finalColor, changeColor] = React.useState('#fff');
  function handleOnChange() {
    alert('COLOR CHANGED');
    props.onChange(finalColor);
  }
  return (
    <div className="relative-position">
      <input type="text" value={finalColor} onChange={() => handleOnChange} style={{display: "none"}}/>
      <CirclePicker
        color={finalColor}
        onChangeComplete={colore => changeColor(colore.hex)}
        colors={[
          '#004de8',
          '#2ecc71',
          '#ff9300',
          '#62708b',
          '#ff003a',
          '#20396a'
        ]}
        circleSize={24}
      ></CirclePicker>
      <a
        className="btn-select-color"
        onClick={() => showColorPicker(!colorPicker)}
      >
        <Icon viewIcone="ArrowDropDown" style={{ margin: '5px' }} />
      </a>
      {colorPicker ? (
        <span className="chrome-picker">
          <ChromePicker
            color={finalColor}
            onChangeComplete={colore => changeColor(colore.hex)}
            disableAlpha={true}
          />
        </span>
      ) : (
        ''
      )}
    </div>
  );
}

情况：

我或多或少地尝试了他们在这里解释的方式，但是无论我做什么，都不会调用handleOnChange函数并且我看不到警报。

此外，我的目标是在父组件中使用这个组件，或多或少像这样：**父组件：**

<ColorPicker onChange={e => this.state.color = e} />

因此，通过这种方式，我可以在父状态下选择颜色。

我在 Child 函数中什么也得不到，也没有在父组件上更新状态。

有人可以帮助我吗？我是 React 的新用户 :(

标签： reactjstypescriptonchange

Answer 1

useCallback可能是一个不错的选择，请参阅此QA和文档

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);