Question

我正在创建一个联系人列表，您可以在其中将联系人添加到收藏夹。然后过滤我最喜欢的联系人。

首先所有联系人的状态均为isFavorite: false，然后单击一个联系人，然后单击设置isFavorite: true的星号。我关闭该联系人并单击过滤器按钮，以查看我所有喜欢的联系人

所以在这里我将联系人添加到我的收藏夹：

ContactName.js

state = {
    isFavorite: false
  }

handleFavorite = () => {
    this.setState({
      isFavorite: !this.state.isFavorite
    })
  }

render() {
    return (
      <React.Fragment>
        <li onClick={this.handleClick}>
          {this.props.contact.name}
        </li>
        {
          this.state.isOpen ?
            <Contact
              contact={this.props.contact}
              close={this.handleClick}
              favorite={this.handleFavorite}
              isFavorite={this.state.isFavorite}
            />
          : null
        }
      </React.Fragment>

    )
  }

Contact.js

<Favorites
  id={contact.id}
  name={contact.name}
  onClick={this.props.favorite}
  state={this.props.isFavorite}
/>

Favorites.js 这就是收藏夹组件所在的地方

<span onClick={this.props.onClick}>
  {
    !this.props.state 
    ? <StarBorder className="star"/> 
    : <Star className="star"/>
   }
</span>

，这是我希望能够获得isFavorite状态的地方。这是用于过滤联系人的按钮的父组件。

ContactList.js

<React.Fragment>
  <span
    className="filter-button"
   >Filtera favoriter</span>
   <ul className="contacts">
     {
       this.props.contacts           
.filter(this.handleSearchFilter(this.props.search))
      .map(contact => (
         <ContactName
            key={contact.id}
            contact={contact}
            name={contact.name}
          />
        ))
       }
     </ul>
  </React.Fragment>

Answer 1

您的操作方向错误。

在React中，您可以使用props传递数据（或使用Context传递数据，此处不是这种情况）。因此，如果您需要有关祖先组件的数据，则该数据应为该祖先的状态/属性。

在您的情况下，favorite数据应位于contacts（定义为ContactName的道具）的内部，并且应像其他数据一样将其传递给ContactName道具。

<React.Fragment>
  <span
    className="filter-button"
   >Filtera favoriter</span>
   <ul className="contacts">
     {
       this.props.contacts           
.filter(this.handleSearchFilter(this.props.search))
      .map((contact, index) => (
         <ContactName
            key={contact.id}
            contact={contact}
            name={contact.name}
            isFavorite={contact.isFavorite}
            handleFavorite={() => this.props.handleFavorite(index))}
          />
        ))
       }
   </ul>
</React.Fragment>

并在您的 ContactName.js

中

render() {
    return (
      <React.Fragment>
        <li onClick={this.handleClick}>
          {this.props.contact.name}
        </li>
        {
          this.state.isOpen ?
            <Contact
              contact={this.props.contact}
              close={this.handleClick}
              favorite={this.props.handleFavorite}
              isFavorite={this.props.isFavorite}
            />
          : null
        }
      </React.Fragment>

    )
  }

和toggleFavorite函数也应该与contacts状态在同一位置。

Answer 2

在React中，父组件不应访问其子状态。相反，您需要将irb(main):009:0> driver.get("http://app:4000/hotels/los-angeles/yoba") => nil irb(main):010:0> driver.current_url => "https://app:4000/hotels/los-angeles/yoba"状态上移至isFavorite组件，并将其变成列表或映射，而不是布尔值。

ContactList.js

ContactList

现在class ContactList extends React.Component { state = { // In this example, `favorites` is a map of contact ids. // You could also use an array to keep track of the favorites. favorites: {}, }; render() { return ( <React.Fragment> <span className="filter-button">Filter a favorite</span> <ul className="contacts"> {this.props.contacts .filter(this.handleSearchFilter(this.props.search)) .map(contact => ( <ContactName key={contact.id} contact={contact} isFavorite={!!this.state.favorites[contact.id]} name={contact.name} handleFavorite={() => this.handleFavorite(contact.id)} /> ))} </ul> </React.Fragment> ); } handleFavorite = contactId => { // Use a callback for state here, since you're depending on the previous state. this.setState(state => { return { ...state.favorites, [contactId]: !state.favorites[contactId], // Toggle the value for given contact. }; }); }; }和handleFavorite道具可以简单地根据需要传递给子组件。

Answer 3

好吧，我设法使孩子的状态在父母中。但是现在每次我将新联系人添加到收藏夹时，它都会创建新对象-请参见代码框https://codesandbox.io/embed/charming-bohr-rwd0r

是否有一种方法可以将所有这些新创建的对象混搭为一个对象，并将一个大对象设置为等于新状态的收藏夹= []？

获取父组件中的子组件状态

3 个答案: