如何从另一个组件设置/获取一个组件的值？

Question

Background:

I have a component (component A) that includes another component (MyColorPicker) within it. I am trying trying to set/get the value of MyColorPicker from component A.

Problem:

I am able to set the background color by passing a prop to MyColorPicker like so: <MyColorPicker background="#ff0000" /> .

However, I want to be able to update the background dynamically (ie depending on user input) rather than harcoding it into the prop. I also want to be able to get the current background color value in the handleSubmit function in Component A.

Component A Code:

// imports...

function myFunctionA(props) {

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

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

MyColorPicker Code:

// imports...

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

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

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

export default MyBlockPicker;

Any ideas on how to proceed here? Thanks!

Answer 1

You can pass the setState function to the child. If you are using class components you can wrap the setState so the child only has access to a limited amount of the state.

ie

In myFunctionA

function myFunctionA(props) {

  const [selectedColor, setSelectedColor] = useState(null)

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

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

In MyColorPicker

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}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

BTW you are mixing class components and functional components which is going to be a pain as the code base grows...