React Hook: отправка данных из дочернего в родительский компонент - PullRequest
Новая
       4

React Hook: отправка данных из дочернего в родительский компонент

4 голосов
/ 17 апреля 2019

Я ищу самое простое решение для передачи данных от дочернего компонента его родителю.

Я слышал об использовании Context, свойствах прохода через лоток или обновлении реквизитов, но я не знаю, какие именноОдно из них - лучшее решение.

Я создаю интерфейс администратора с PageComponent, который содержит ChildComponent с таблицей, в которой я могу выбрать несколько строк.Я хочу отправить своему родительскому PageComponent номер строки, выбранной в моем ChildComponent.

Примерно так:

PageComponent: 

<div className="App">
  <EnhancedTable />         
  <h2>count 0</h2>
  (count should be updated from child)
</div>

ChildComponent: 

 const EnhancedTable = () => {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
          Click me {count}
       </button>
     )
  };

Я уверен, что это довольно простая вещь, я не хочу использовать для этого избыточность.

Ответы [ 3 ]

5 голосов
/ 17 апреля 2019

Обычный метод для этих ситуаций - поднять состояние до до первого общего предка всех компонентов, которые должны использовать это состояние (т. Е. PageComponent в этом случае), и передать вниз состояние и функции, изменяющие состояние дочерних компонентов в качестве реквизита.

Пример 

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
2 голосов
/ 17 апреля 2019

Вы можете создать метод в родительском компоненте, передать его дочернему компоненту и вызывать его из реквизита каждый раз, когда изменяется состояние дочернего элемента, сохраняя состояние в дочернем компоненте. 

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};

class PageComponent extends React.Component { 
    callback = (count) => {
        // do something with value in parent component, like save to state
    }

    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />         
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}
0 голосов
/ 22 июля 2019

Чтобы упростить задачу, вы на самом деле можете поделиться установщиками состояния с дочерними элементами, и теперь у них есть доступ для установки состояния его родителя.

пример: предположим, что есть 4 компонента, как показано ниже, 

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

таким образом, у компонента-дедушки есть фактическое состояние, и, разделяя метод setter (setName) для родительского и дочернего элементов, они получают доступ к изменению состояния деда.

вы можете найти рабочий кодв песочнице ниже, https://codesandbox.io/embed/async-fire-kl197

...