Как изменить состояние дочернего компонента из родителя?

Question

[Shavadrius]

Как правильно передавать инициализирующее значение в дочерний компонент (в котором есть input) из родителя?
Хочу, чтобы при изменении стейта родителя перерисовывался дочерний элемент, который зависит от этого стейта с новыми данными.

import React, { useState } from "react";

interface MyProps {
  placholder?: string;
  value?: string;
}

const MyInput = (props: MyProps) => {
  const [value, setValue] = useState("");
  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  return (
    <input
      type="text"
      placeholder={props.placholder}
      value={value}
      onChange={handleOnChange}
    />
  );
};

export default function App() {
  const [inputData, setInputData] = useState<MyProps>({
    placholder: "Init Placeholder...",
    value: "just a value..."
  });

  const handleOnClick = () => {
    let changed = { ...inputData };
    changed.placholder = "Changed ".concat(`${Math.random()}`);
    changed.value = "It's not working...".concat(`${Math.random()}`);
    setInputData(changed);
  };

  return (
    <div className="App">
      <h1>How to do...</h1>
      <MyInput {...inputData} />
      <button onClick={handleOnClick}>Pass value from props through!!!</button>
    </div>
  );
}

Answer 1

[0xD34F]

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.

Comments

[Shavadrius]

Спасибо! То, что нужно. Все оказалось гораздо проще, чем я мог себе представить.

[Shavadrius]

Возможно я что-то и делаю не так, но я создал свой Input, затем HOC, который оборачивает этот Input и превращает его в InputWithSearch (добавляя компонент SearchArea). Смысл в том, что при клике на элемент внутри SearchArea должен перерисовываться и Input. Значения я храню в родителе, в котором отстраиваю InputSearchArea и обновлять его буду через props и, как я теперь понимаю, useEffect.

[szQocks]

Shavadrius, задавай новый вопрос, раз у тебя какая-то новая проблема