Передача состояния от дочернего к родительскому компоненту - PullRequest
Новая
       8

Передача состояния от дочернего к родительскому компоненту

0 голосов
/ 13 сентября 2018

Есть ли какой-нибудь правильный способ получить доступ к свойству в состоянии дочернего компонента и получить его значение от родительского компонента?

У меня есть компонент с именем "itemSelection", в котором я отображаю ответ API, чтобы получить такие элементы, как этот 

            <div className="row">
                {this.state.items.map(i => <Item ref="item" id={i.id} name={i.name} quantity={i.quantity} />)}
            </div>

В компоненте Item есть свойство в состоянии с именем «selected», которое я хочу узнать его значение, если оно было true или false в компоненте itemSelection. Я знаю, что могу передавать реквизиты из itemSelection в Item, но что, если я хочу обратного? где я могу передать данные из Item в itemSelection

EDITED

Итак, я создал свойство в родительском компоненте "itemSelection" с именем "selected" и установил его в = false = (зная, что у меня есть такое же свойство в дочернем компоненте, для которого также установлено = false = )

в дочернем компоненте я поместил эту строку в функцию обработчика событий после того, как я установил setState для свойства, выбранного для изменения его на = true = 

this.props.getPropsFromChild(this.state.selected);

затем в родительском компоненте я сделал эту функцию 

getPropsFromChild = (selected) => {
      this.setState({selected: selected}); 
  }

но все равно не сработало, я не знаю, правильно ли я все установил.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Как пытались объяснить в комментариях, вы можете использовать обратные вызовы для этого, но старайтесь избегать получения значения от дочернего компонента, подобного этому. Вы можете сохранить состояние selected в родительском компоненте. Вашему компоненту Item для этого вообще не нужно сохранять состояние. С правильными обработчиками от родителя вы можете легко обновить свое состояние. 

class App extends React.Component {
  state = {
    items: [
      { id: "1", name: "foo", quantity: 1 },
      { id: "2", name: "bar", quantity: 2  },
      { id: "3", name: "baz", quantity: 3 },
    ],
    selected: "",
  }

  handleSelect = item => this.setState({ selected: item.id })

  render() {
    const { items } = this.state;
    
    return (
      <div>
      Selected item: {this.state.selected}
      {
        items.map( item =>
          <Item key={item.id} item={item} onSelect={this.handleSelect} />
        )
      }
      </div>
    );
  }
}

const Item = props => {
  const { item, onSelect } = props;
  const handleSelect = () => onSelect( item );
  
  return (
    <div style={{border: "1px solid gray"}} onClick={handleSelect}>
      <p><strong>Item id:</strong> {item.id}</p>
      <p><strong>Item name</strong>: {item.name}</p>
      <p><strong>Item quantity</strong>: {item.quantity}</p>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
0 голосов
/ 13 сентября 2018

Передача реквизита от дочернего к родительскому компоненту работает с использованием функций обратного вызова в React.Или вы также можете использовать библиотеку управления состояниями, такую ​​как Redux, и сохранять данные в дочернем компоненте и получать данные в родительском компоненте.

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

ItemSelection: родительский компонент 

      //handler function
      getPropsFromChild = (id, name) => {
            console.log(id, name);
       }

       //pass down your handler function to child component as a prop
        <div className="row">
            {this.state.items.map(i => <Item ref="item" id={i.id} name={i.name} getPropsFromChild={this.getPropsFromChild} quantity={i.quantity} />)}
        </div>

Item: дочерний компонент 

componentDidMount(){
    //access handler function passed to your item component and access it using this.props and send the values as you want to the function
    this.props.getPropsFromChild(“01”, “Hi”);
}
...