Блог

Фон:

У меня есть компонент (компонент А), который включает в себя другой компонент (миколорпикер). Я пытаюсь установить/получить значение MyColorPicker из компонента A.

Проблема:

Я могу установить цвет фона, передав реквизит MyColorPicker примерно так: <MyColorPicker background="#ff0000" /> .

Тем не менее, я хочу иметь возможность динамически обновлять фон (т. Е. В Зависимости от ввода пользователя), а не закодировать его в реквизит. Я также хочу иметь возможность получить текущее значение цвета фона в handleSubmit функции в компоненте A.

Компонент A Код:

 // imports...

function myFunctionA(props) {

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

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

Код МиКолорПикера:

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

Есть какие-нибудь идеи о том, как здесь действовать? Спасибо!

Вы можете передать setState функцию ребенку. Если вы используете компоненты класса, вы можете обернуть setState их так, чтобы у ребенка был доступ только к ограниченному объему состояния.

т.е.

В моей функции

 function myFunctionA(props) {

  const [selectedColor, setSelectedColor] = useState(null)

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

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

export default MyBlockPicker;
 

Кстати, вы смешиваете компоненты класса и функциональные компоненты, что будет проблемой по мере роста базы кода…