javascript - 在子组件上切换事件类

Question

我有点头疼，想弄清楚 React 的实现方式。

我有一个包含 SearchItems 的 Searches 组件，当一个项目被点击时，我需要将它的状态设置为 active 以使其获得正确的 CSS，我设法让它工作正常但我将如何删除其他人的活跃状态？

我在想我可以从顶层组件传递一个函数，该函数将获取搜索的 ID，单击时它会快速通过 SearchItems 并根据它是哪个 ID 将它们的状态更改为 true/false ？

下面的代码!

顶级组件:

    import React from "react";
import {Link} from "react-router";

import Search from "./Search";

    export default class Searches extends React.Component {
      constructor(){
        super();
        this.state = {
          searches : [
          {
            id : "2178348216",
            searchName: "searchName1",
            matches: "5"

          },
          {
            id : "10293840132",
            searchName: "searchName2",
            matches: "20"

          }

          ]
        };

      }

      render() {
        const { searches } = this.state;

        const SearchItems = searches.map((search) => {
          return <Search key={search.id} {...search}/>

        })

        return (
         <div> {SearchItems} </div>
          );

      }
    }

搜索项组件

export default class Search extends React.Component {
  constructor() {
    super();

    // Set the default panel style

    this.state = {
      panelStyle: { height: '90px', marginBottom: '6px', boxShadow: '' },
      selected: false
    }



  }

  isActive(){
    return 'row panel panel-success ' + (this.state.selected ? 'active' : 'default');
  }

viewNotifications(e){
  this.setState({selected: true});

}
    render() {
      const { id, searchName, matches } = this.props;



      const buttonStyle = {
        height: '100%',
        width: '93px',
        backgroundColor: '#FFC600'
      }

    return (
     <div style={this.state.panelStyle} className={this.isActive()}>
       <div class="col-xs-10">
       <div class="col-xs-7">
         Search Name: {searchName}
       </div>
        <div class="col-xs-7">
         Must Have: PHP, MySQL
       </div>
       <div class="col-xs-7">
         Could Have: AngularJS
       </div>

       </div>

          <button type="button" onClick={this.viewNotifications.bind(this)} style={buttonStyle} class="btn btn-default btn-lg"> {matches} </button>



     </div>



    );
  }
}

Answer 1

我认为您根本不需要子组件中的状态。事实上，避免在大多数组件中使用状态是一个好主意，这样它们就很容易推理和重用。

在这种情况下，我会将所有状态仅保留在父组件上。

顶部组件:

import React from "react";

import Search from "./search";

export default class Searches extends React.Component {
  constructor(){
    super();
    this.state = {
      searches : [
        {
          id : "2178348216",
          searchName: "searchName1",
          matches: "5"
        },
        {
          id : "10293840132",
          searchName: "searchName2",
          matches: "20"
        }
      ],
      activeElement : null
    };
  }

  _onSearchSelect(searchId) {
    this.setState({'activeElement': searchId})
  }

  render() {
    const { searches, activeSearchId } = this.state;

    const SearchItems = searches.map((search) => {
      return <Search key={search.id} {...search}
        isActive={search.id === activeElement}
        onSelect={this._onSearchSelect.bind(this)} />
    })

    return (
     <div> {SearchItems} </div>
    );
  }
}

子组件:

import React from "react";

export default class Search extends React.Component {
  _getPanelClassNames() {
    const { isActive } = this.props
    return 'row panel panel-success ' + (isActive ? 'active' : 'default')
  }

  _onSelect() {
    const { id, onSelect } = this.props;
    onSelect(id)
  }

  render() {
    const { searchName, matches } = this.props;
    const panelStyle = { height: '90px', marginBottom: '6px', boxShadow: '' }
    const buttonStyle = {
      height: '100%',
      width: '93px',
      backgroundColor: '#FFC600'
    }
    return (
      <div style={panelStyle} className={this._getPanelClassNames()}>
        <div className="col-xs-4">
          Search Name: {searchName}
        </div>
        <div className="col-xs-3">
          Must Have: PHP, MySQL
        </div>
        <div className="col-xs-3">
         Could Have: AngularJS
        </div>
        <div className="col-xs-2">
          <button type="button" onClick={this._onSelect.bind(this)}
            style={buttonStyle} className="btn btn-default btn-lg"
          >
            {matches}
          </button>
        </div>
      </div>
    );
  }
}

您还可以看到它在 Plunker 中运行:https://plnkr.co/edit/sdWzFedsdFx4MpbOuPJD?p=preview