Question

如何通过组件中的“isSelected”点击事件在我的容器中切换“isActive”？

请参阅我的容器中导入的“列出帐户”组件。我通过道具传递帐户数据。

当我遍历每个帐户时，我想检查“isActive”是真还是假。

我认为这将决定何时渲染类。

是否可以让map函数中的“item”在我的“isSelected”函数中监听状态并更新状态？

最好的方法是什么？

这是我的容器代码：

#include <stdio.h>

int main ( void) {
    char buffer[100] = "";
    char extra = '\0';
    int scanned = 0;
    int choice = 0;

    do {
        printf("\n\nWhat operation?\n1. Define array\n2. Delete element\n3. Add element\n4. Order array\n5. Randomize array\n6. Print array\n0. Exit\n");
        if ( fgets ( buffer, sizeof buffer, stdin)) {
            if ( 1 == ( scanned = sscanf ( buffer, "%d %c", &choice, &extra))) {// the space will consume whitespace and %c a non-whitespace character
                printf ( "choice %d\n", choice);
                if ( 0 > choice || choice > 6) {
                    scanned = 0;
                }
            }
            if ( 1 != scanned) {
                printf ( "\t\tenter a number 0 to 6\n");
            }
        }
        else {
            fprintf ( stderr, "problem fgets\n");
            return 0;
        }
    } while ( 1 != scanned);

    return 0;
}

以下是我的列表帐户组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './index.css'; // styles from

import ProfileHeader from '../../../components/ProfileHeader';
import ListAccounts from '../../../components/ListAccounts';

import { fetchingPageData } from '../../../actions';


class WhosWatching extends Component {
  state = {
    accounts: [
      {
        isActive: false,
        isChild: false,
        name: 'Olivia',
        avatar: '/images/avatars/profile-img-03.png'
      },
      {
        isActive: false,
        isChild: false,
        name: 'Fred',
        avatar: '/images/avatars/profile-img-01.png'
      },
      {
        isActive: false,
        isChild: true,
        name: 'Dirk',
        avatar: '/images/avatars/profile-img-02.png'
      },
    ]
  }

  render() {
    const listAccounts = this.state.accounts;
    return (
      <div className="whos-watching-wrap container">
          <ProfileHeader />
          <h1>Who's Watching?</h1>
          <span>Select an account or add a new profile</span>
          <ListAccounts accounts={listAccounts} />
          <div className="whos-watching-cta">
            <button>Add Profile</button>
          </div>
      </div>
    );
  }
};

Answer 1

容器

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './index.css'; // styles from

import ProfileHeader from '../../../components/ProfileHeader';
import ListAccounts from '../../../components/ListAccounts';

import { fetchingPageData } from '../../../actions';


class WhosWatching extends Component {
  state = {
    accounts: [
      {
        isActive: false,
        isChild: false,
        name: 'Olivia',
        avatar: '/images/avatars/profile-img-03.png'
      },
      {
        isActive: false,
        isChild: false,
        name: 'Fred',
        avatar: '/images/avatars/profile-img-01.png'
      },
      {
        isActive: false,
        isChild: true,
        name: 'Dirk',
        avatar: '/images/avatars/profile-img-02.png'
      },
    ]
  }

  toggle = (i) => {
    const accounts = [...this.state.accounts]
    accounts[i].isActive = !accounts[i].isActive
    this.setState({ accounts })
  }

  render() {
    const listAccounts = this.state.accounts;
    return (
      <div className="whos-watching-wrap container">
          <ProfileHeader />
          <h1>Who's Watching?</h1>
          <span>Select an account or add a new profile</span>
          <ListAccounts toggle={this.toggle} accounts={listAccounts} />
          <div className="whos-watching-cta">
            <button>Add Profile</button>
          </div>
      </div>
    );
  }
};

列出帐户

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import KidsIcon from '../../assets/svg/icons/kids.svg';

import './index.css';

export default class ListAccounts extends Component { 

    state = {
      accounts: []
    }

    componentDidMount(){
      const { accounts } = this.props;
      this.setState({ accounts })
    }

    componentWillReceiveProps(nextProps){
      if(nextProps.accounts){
        this.setState({ accounts })
      }
    }

    isSelected(index) {
      this.props.toggle(index)
    }

    render() {
        const { accounts } = this.state
        return (
            <div className="list-accounts-wrap">
                {accounts.map((item, i) => {
                    return <div className="list-accounts-item is-selected" onClick={() => this.isSelected(i)} key={i}>
                        <img src={item.avatar} />
                        <div className="account-details-wrap">
                            <span className="account-name">{item.name}</span>
                            {item.isChild == true ? <KidsIcon /> : null }
                        </div>
                    </div>
                })}             
            </div>
        )
    }

}

Answer 2

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './index.css'; // styles from

import ProfileHeader from '../../../components/ProfileHeader';
import ListAccounts from '../../../components/ListAccounts';

import { fetchingPageData } from '../../../actions';


class WhosWatching extends Component {
  state = {
    accounts: [
      {
        isActive: false,
        isChild: false,
        name: 'Olivia',
        avatar: '/images/avatars/profile-img-03.png'
      },
      {
        isActive: false,
        isChild: false,
        name: 'Fred',
        avatar: '/images/avatars/profile-img-01.png'
      },
      {
        isActive: false,
        isChild: true,
        name: 'Dirk',
        avatar: '/images/avatars/profile-img-02.png'
      },
    ]
  }
  
   handleSelect(i) {
      let rawAccountsData = this.state.accounts;
      rawAccountsData = rawAccountsData.map((val, index) =>       {
          val.isActive = index == i ? true : false;
          return val;
      });
      this.setState({
          accounts: rawAccountsData
      });
  }

  render() {
    const listAccounts = this.state.accounts;
    return (
      <div className="whos-watching-wrap container">
          <ProfileHeader />
          <h1>Who's Watching?</h1>
          <span>Select an account or add a new profile</span>
          <ListAccounts accounts={listAccounts}  handleSelect = {this.handleSelect.bind(this)} />
          <div className="whos-watching-cta">
            <button>Add Profile</button>
          </div>
      </div>
    );
  }
};

import React, {
    Component
} from 'react';
import PropTypes from 'prop-types';
import KidsIcon from '../../assets/svg/icons/kids.svg';

import './index.css';

export default class ListAccounts extends Component {

    constructor(props) {
        super(props);
        this.state = {
            accounts: props.accounts
        }
    }
    componentWillReceiveProps(props, state) {
        if (JSON.stringify(props.accounts) != JSON.stringify(state.accounts))
            this.setState({
                accounts: props.accounts
            });
    }
  
   render() {
        const { accounts,handleSelect } = this.props;
        return (
            <div className="list-accounts-wrap">
                {accounts.map((item, i) => {
                    return <div className="list-accounts-item is-selected" onClick={() => handleSelect(i)} key={i}>
                        <img src={item.avatar} />
                        <div className="account-details-wrap">
                            <span className="account-name">{item.name}</span>
                            {item.isChild == true ? <KidsIcon /> : null }
                        </div>
                    </div>
                })}             
            </div>
        )
    }

}

切换组件上的类映射

2 个答案: