Question

在子组件状态下是否有任何适当的方法来访问属性并从父组件获取其值？

我有一个名为“ itemSelection”的组件，在该组件中，我通过api响应进行映射以获取一些类似的项目

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

在Item组件中，有一个处于“已选择”状态的属性，我想知道它的值在itemSelection组件中为true还是false。我知道我可以将道具从itemSelection传递给Item，但是如果我想要相反的东西怎么办？我可以在其中将数据从Item传递到itemSelection

编辑

因此，我在父组件“ itemSelection”中创建了一个名为“ selected”的属性，并将其设置为= false =（知道子组件中的属性也相同，该属性也设置为= false = ）

在子组件中，我将setState设置为将其更改为= true =

的选定属性后，将这一行放入事件处理程序函数中

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

然后在父组件中，我已完成此功能

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

但仍然没有用，我不知道是否设置正确。

Answer 1

使用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>

项目：子组件

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”);
}

Answer 2

正如试图在注释中解释的那样，您可以为此使用回调，但是要避免从这样的子组件中获取值。您可以在父组件中保持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>

将状态从子级传递到父级组件

2 个答案: