如何在单击按钮时获取颜色选择器的颜色？

Question

背景：

当我单击我的onSubmit按钮时，我试图获取颜色选择器的当前值。 颜色选择器位于一个单独的组件中。

问题：

当我通过颜色选择器更改颜色时，我收到一条错误消息： TypeError: _this.props.setSelectedColor is not a function

内部具有颜色选择器的组件：

function myFunctionA(props) {

  const [selectedColor, setSelectedColor] = useState(null)

  const handleSubmit = useCallback(() => {
    console.log(selectedColor);
  });

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker setSelectedColor/>
      </Form>
    </>
  )
}

颜色选择器代码：

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
    this.props.setSelectedColor(color.hex)
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
      />
    );
  }
}

export default MyBlockPicker;

关于如何解决的任何想法？

Answer 1

如果您想将 function 传递给孩子，您需要这样做：

<MyColorPicker setSelectedColor={setSelectedColor} />