javascript - 如何使用从列表创建的对象获取管理 React 状态？

Question

我是 React 新手，我有以下组件，它将根据从父组件接收到的道具生成 x 数量的 Checkbox/Dropdown 对象。处理各种 Checkbox/Dropdown 对象状态的最佳方法是什么？

列表.js：

import * as React from 'react';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { PrimaryButton } from 'office-ui-fabric-react';

export default class HeroList extends React.Component {

    handleSubmit(x) {
        console.log(x);
    }

    render() {
        const {
            emails,
            folders
        } = this.props;
        const listItems = emails.map((email, i) => (
            <li className='ms-ListItem' key={i}>
                <Checkbox label={email.From.EmailAddress.Name} />
                <Dropdown defaultSelectedKey={email.Categories[0]} options={folders} />
                <span className='ms-font-m ms-fontColor-neutralPrimary'>{email.Subject}</span>
            </li>
        ));
        return (
            <main className='ms-welcome__main'>
                <PrimaryButton onClick={this.handleSubmit} text="Sort Emails" />
                <ul className='ms-List ms-welcome__features ms-u-slideUpIn10'>
                    <Checkbox name="checkAll" label="Select All" />
                    {listItems}
                </ul>
            </main>
        );
    }
}

标签： javascriptreactjs