xgqfrms / FEIQA

FEIQA: Front End Interviews Question & Answers
https://feiqa.xgqfrms.xyz
MIT License
7 stars 0 forks source link

auto-complete & keyboard-ghost #69

Open xgqfrms opened 5 years ago

xgqfrms commented 5 years ago

auto-complete & keyboard-ghost

React Components

https://codesandbox.io/s/7l2qm96mq

https://ant.design/components/auto-complete-cn/

xgqfrms commented 5 years ago

键盘精灵

https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category

用这个代替键盘精灵,怎么样 ?

xgqfrms commented 5 years ago

keyboard-ghost components

https://codesandbox.io/s/7l2qm96mq https://codesandbox.io/s/rlj54x575q

xgqfrms commented 5 years ago

https://element.eleme.io/#/zh-CN/component/layout

xgqfrms commented 5 years ago

array to object


const json = "600000,浦发银行,600000,600000.SH,1120;600001,邯郸钢铁(退市),600001,600001.SH,1121;600002,齐鲁石化(退市),600002,600002.SH,1123;600003,ST东北高(退市),600003,600003.SH,1124;600004,白云机场,600004,600004.SH,1125;600005,武钢股份(退市),600005,600005.SH,1127;600006,东风汽车,600006,600006.SH,1128;600007,中国国贸,600007,600007.SH,1129;600008,首创股份,600008,600008.SH,1130;600009,上海机场,600009,600009.SH,1131;";

arr = json.split(`;`).filter(item => item !== "");

//  ["600000,浦发银行,600000,600000.SH,1120", "600001,邯郸钢铁(退市),600001,600001.SH,1121", "600002,齐鲁石化(退市),600002,600002.SH,1123", "600003,ST东北高(退市),600003,600003.SH,1124", "600004,白云机场,600004,600004.SH,1125", "600005,武钢股份(退市),600005,600005.SH,1127", "600006,东风汽车,600006,600006.SH,1128", "600007,中国国贸,600007,600007.SH,1129", "600008,首创股份,600008,600008.SH,1130", "600009,上海机场,600009,600009.SH,1131"]

obj = arr.forEach(
    (str, i) => {
        // 
    }
);
xgqfrms commented 5 years ago

array to object

https://stackoverflow.com/users/5934465/xgqfrms https://stackoverflow.com/users/8629798/xgqfrms-gildata

https://stackoverflow.com/questions/4647817/javascript-object-rename-key

https://stackoverflow.com/questions/42148920/array-of-array-to-object-javascript https://stackoverflow.com/questions/52007559/convert-nested-array-to-an-object https://stackoverflow.com/questions/41580330/object-to-array-an-array-of-arrays

https://stackoverflow.com/questions/1869091/how-to-convert-an-array-to-object-in-php

xgqfrms commented 5 years ago

https://github.com/xgqfrms/NCAIOC https://cdn.xgqfrms.xyz/web-ide/index.html

xgqfrms commented 5 years ago

SVN, chrome, extensions, Jira

https://www.cnblogs.com/xgqfrms/p/10109703.html https://www.cnblogs.com/xgqfrms/tag/SVN/

xgqfrms commented 5 years ago

highcharts

Line charts missing points

https://www.highcharts.com/demo/area-missing

null

https://stackoverflow.com/questions/15123163/missing-value-in-highcharts-line-graph-results-in-no-line-just-points


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        /* data: [29.9, '', 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], */
    }]

});

https://jsfiddle.net/2rNzr/200/

xgqfrms commented 5 years ago

Antd Table & action & operation

https://codesandbox.io/s/vjpymv7mq5


import React, { Component } from "react";
import ReactDOM from "react-dom";
// import PropTypes from 'prop-types';

import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

class APP extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            visible: true,
            uid: ""
        };
    }
    // auto bind this
    getRowUid = e => {
        // console.log(`e.target =`, e.target);
        // console.log(`e.target.dataset =`, e.target.dataset);
        // console.log(`e.target.value =`, e.target.value);
        let uid = e.target.dataset.uid;
        console.log(`uid =`, uid);
        this.setState({
            uid
        });
    };
    render() {
        const columns = [
            {
                title: "Name",
                dataIndex: "name",
                key: "name"
            },
            {
                title: "Age",
                dataIndex: "age",
                key: "age"
            },
            {
                title: "Address",
                dataIndex: "address",
                key: "address"
            },
            {
                title: "Action",
                dataIndex: "action",
                key: "action",
                render: (text, record) => {
                    // console.log(`text =`, text);
                    // console.log(`record =`, record);
                    return (
                        <a
                            href="javascript:;"
                            data-uid={record.name}
                            className=""
                            onClick={e => this.getRowUid(e)}
                        >
                            查看
                        </a>
                    );
                }
            }
        ];
        const data = [
            {
                key: 1,
                name: "John Brown",
                age: 32,
                address: "New York No. 1 Lake Park",
                description:
                    "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
            },
            {
                key: 2,
                name: "Jim Green",
                age: 42,
                address: "London No. 1 Lake Park",
                description:
                    "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
            },
            {
                key: 3,
                name: "Joe Black",
                age: 32,
                address: "Sidney No. 1 Lake Park",
                description:
                    "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
            }
        ];
        return (
            <Table
                columns={columns}
                expandedRowRender={record => (
                    <p style={{ margin: 0 }}>{record.description}</p>
                )}
                dataSource={data}
            />
        );
    }
}

// export default APP;
// export {APP};

ReactDOM.render(<APP />, document.getElementById("container"));
xgqfrms commented 5 years ago

null bug

image

image

image

xgqfrms commented 5 years ago

back-top

https://codesandbox.io/s/x953vpnm74 https://codesandbox.io/s/n4yr2j5mq0 https://ant.design/components/back-top-cn/

xgqfrms commented 5 years ago

Antd Table & action & operation

https://codesandbox.io/s/vjpymv7mq5

xgqfrms commented 5 years ago

Chrome 插件, 详细教程

666 , 原创又写的这么好的文章真不多了,点个 👍!

https://www.cnblogs.com/mfryf/p/3701801.html

xgqfrms commented 5 years ago

https://developer.chrome.com/extensions/samples#search:

xgqfrms commented 5 years ago

https://stackoverflow.com/questions/3436102/copy-to-clipboard-in-chrome-extension

https://css-tricks.com/copy-paste-the-web/

https://css-tricks.com/native-browser-copy-clipboard/

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

https://clipboardjs.com/#usage

xgqfrms commented 5 years ago

antd & zh-Hans bug

date-picker 如何设置可以显示中文呀?

https://github.com/ant-design/ant-design/issues?utf8=%E2%9C%93&q=datepicker import 'moment/locale/zh-cn' https://codesandbox.io/s/4znnm58109 https://github.com/ant-design/ant-design/issues/11464#issuecomment-425308789 https://ant.design/components/locale-provider-cn/

xgqfrms commented 5 years ago

https://gitter.im/ant-design/ant-design image

https://codesandbox.io/s/k32vqo15x7

local

cn

image https://ant.design/components/locale-provider-cn/ https://codesandbox.io/s/3xp4y9zp7q

xgqfrms commented 5 years ago

react-event-pooling

https://codesandbox.io/s/3xp4y9zp7q

image

https://reactjs.org/docs/events.html#event-pooling https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components

https://reactjs.org/docs/handling-events.html#___gatsby https://reactjs.org/docs/react-without-es6.html#autobinding

xgqfrms commented 5 years ago

https://react2.xgqfrms.xyz/docs/events.html#%E4%BA%8B%E4%BB%B6%E6%B1%A0

xgqfrms commented 5 years ago

Warning: validateDOMNesting(...):

<form> cannot appear as a descendant of <form>. See OptionsItems > Form > form > ... > Table > Table > TableRow > TableCell > Form(WrappedComponent) > (unknown) > App > Form > form.

form 后代 bug

xgqfrms commented 5 years ago

https://codesandbox.io/s/r5lm95wywo

https://codesandbox.io/s/r2zwwr82m

xgqfrms commented 5 years ago

https://codesandbox.io/s/nrj626z5ml

xgqfrms commented 5 years ago

https://ant.design/components/table-cn/#API

image

image

demo

https://ant.design/components/table-cn/#components-table-demo-edit-cell https://ant.design/components/table-cn/#components-table-demo-edit-row

https://codesandbox.io/s/nrj626z5ml

xgqfrms commented 5 years ago

React & Style

https://reactjs.org/docs/dom-elements.html#style

image

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

xgqfrms commented 5 years ago

https://ant.design/components/table/#components-table-demo-edit-row