如何在單擊按鈕時獲取顏色選擇器的顏色？

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} />