# learnIceHard

**Repository Path**: mrstack/learnicehard

## Basic Information

- **Project Name**: learnIceHard
- **Description**: 笨办法学 “飞冰”
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-05-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LearnIceHard

## 项目介绍
从组件部分开始学习飞冰框架，并回顾 React 基本知识。
<br>
项目地址: [ice 组件](https://alibaba.github.io/ice/component/button)

## 学习计划
依照组件介绍循序渐进


## 安装教程
请按需添加 `ice` 组件依赖, 以下为react 环境基础安装：

1. cnpm install -g create-react-app
2. create-react-app my-app
3. cd my-app
2. yarn
3. yarn start

## ice 要点记录

1. Table
涉及dataSource， 以下三个参数的顺序不能错:
<br>
(value, index, record) => { }
<br>

- 含义：
 
  - `value` 为 dataIndex 标识字段的值，
  - `index` 为该条记录在array 中的索引，
  - `record` 为整条记录。


```jsx
import { Table } from '@icedesign/base';

const dataSource = [
  {id:1, time:'2016'},
  {id:2, time: '2017'},
];

const renderTime = (value, index, record) => {
  if (value === '2018') {
    return '今年';
  }
  return value;
}

class TablePage extends Component {
  render() {
    return(
      <Table dataSource={dataSource}>
        <Table.Column title="id" dataIndex="id" />
        <Table.Column title="time" dataIndex="time" cell={renderTime}/>
      </Table>
    )
  }
}
```

2. Table 之 onError 方法
官方给出的 onError 方法并没有奏效，推荐使用  errorImgSrc ， 也更加符合直觉。
<br>

3. Img 如何实现一个切换的开关逻辑？
```jsx
function getImgs(url) {
  if (url === 'https://img.alicdn.com/imgextra/i3/2779138589/TB2_gtLlrBmpuFjSZFuXXaG_XXa_!!2779138589.jpg') {
    return 'https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png';
  }
  return 'https://img.alicdn.com/imgextra/i3/2779138589/TB2_gtLlrBmpuFjSZFuXXaG_XXa_!!2779138589.jpg';
}

export default class Image extends Component {
  
  state = {
    url1: 'https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png',
    url2: 'https://img.alicdn.com/tps/TB1_AZdNFXXXXbLXVXXXXXXXXXX-500-1063.jpg',
  }

  changeImgs = () => {
    this.setState({
      url1: getImgs(this.state.url1),
      url2: getImgs(this.state.url2),
    })
  }
  
  render() {
    return (
      <div>
        <Button style={{marginTop: 20}} onClick={this.changeImgs}>
          切换新突破会重新计算尺寸
        </Button>
      </div>
    )
  }
}

```

3. 表单操作

- Field  表单数据获取、校验工具
  -  rules 之 validator 详情见: [async-validator](https://github.com/yiminghe/async-validator#rules)
  这里没有定义callback(), 其内部string 是 Error 信息。
  " It expects to be passed an array of Error instances to indicate validation failure.";

  -  rules 之 trigger 设置出发条件， 数组形式， 填入事件名 "onBlue" 或 "onChange";

  - 注意 isChecked 实现的方法， value 默认值为  true
  
  

  ```javascript

  isChecked(rule, value, callback) {
    if (!value) {
      callback("没有勾选同意协议")；
    } else {
      callback();
    }
  }

  userName(rule, value, callback) {
    if (value === "frank") {
      setTimeout(() => callback("名称已经存在"), 200);
    } else {
      setTimeout(() =>  callback(), 200)
    }
  }

  <Checkbox
    {...init("checkbox"), {
      valueName: "checked",
      rules: { validator: this.isChecked }
    }}
  />
  {this.field.getError("checkbox") ? (
    <span style= {{ color: "red"}}>
      {this.field.getError("checkbox").join(",")}
    </span>
  ) : (
    ""
  )}
  <Input
    defaultValue=""
    placeholder="填写frank"
    {...init("username", {
      rules: {
        validator: this.userName,
        trigger: ["onBlur", "onChange"]
      }
    })}
  />
  ```


## React  知识点回顾

1. 为何用 `bind(this)`

类 `onClose()` 这种函数写法的时候， 由于在`<Button>` 内部是回调事件，所以必须使用 `bind(this)`

```jsx
class Monospaced extends Component {
   constructor(props) {
    super(props);
    this.state = {
      visible: false,
      align: "cc cc",
      style: {
        width: "80%"
      }
    };
  }

  onClose() {
    this.setState({
      visible: false
    });
  }

  open() {
    this.setState({
      visible: true
    });
  }

  setPosition() {
    this.setState({
      align: false,
      style: {
        top: "10px"
      }
    });
  }

  render() {
    return (
      <span>
        <Button onClick={this.open} type="primary">
          Open dialog
        </Button>
        <Dialog
          visible={this.state.visible}
          onOk={this.onClose}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="Welcome to Alibaba.com"
          style={this.state.style}
          align={this.state.align}
        >
          <h3>Your one-stop communication tool!</h3>
          <ul>
            <li>View messages from buyers & suppliers</li>
            <li>Negotiate the details of your order</li>
          </ul>
          <Button onClick={this.setPosition}>Set position</Button>
        </Dialog>
      </span>
    );
  }
}
```

2. 更优雅的方法？

使用 函数名 + 匿名箭头函数
  ```jsx
  class Monospaced extends Component {
    ......
      onClose = () => {
        this.setState({
          visible: false
        });
      }

      open = () => {
        this.setState({
          visible: true
        });
      }

      setPosition = () => {
        this.setState({
          align: false,
          style: {
            top: "10px"
          }
        });
      }

      render() {
        return (
          <span>
            <Button onClick={this.open} type="primary">
              Open dialog
            </Button>
            <Dialog
              visible={this.state.visible}
              onOk={this.onClose}
              onCancel={this.onClose}
              onClose={this.onClose}
              title="Welcome to Alibaba.com"
              style={this.state.style}
              align={this.state.align}
            >
              <Button onClick={this.setPosition}>Set position</Button>
            </Dialog>
          </span>
        );
      }
  }

  ```