自定義React組件

如果還沒有項目，請看創建umi項目 .

訪問http://localhost:8000 實際由src/pages/index.js渲染，內容爲：

export default function() {
  return "Hello"
}

使用antd添加一個輸入框和一個按鈕：

import {Button, Input} from 'antd';

export default function() {
  return (
    <div>
      <Input/>
      <Button>OK</Button>
    </div>
  )
}

export default 用來當別的模塊在導入文件src/pages/index.js 時候，如果不使用對象結構，默認導入的就是定義的function,
實際上這個function是一個React的組件，它的返回值會被渲染到瀏覽器中。

react提供了狀態(state)描述動態頁面，當狀態值改變之後頁面會重新渲染。一個小例子，只有輸入框輸入的是1234時，按鈕是可用的其他時候禁用：

import {Button, Input} from 'antd';
import {useState} from 'react';

export default function() {
  const [disableBtn, setDisableBtn] = useState(true);

  const inputOnChange = (event) => {
    const v = event.target.value;
    // setDisableBtn(v!=='1234');
    if (v  === '1234'){
      setDisableBtn(false);
    }else{
      setDisableBtn(true);
    }
  }
  return (
    <div>
      <Input onChange={inputOnChange}/>
      <Button type="primary" disabled={disableBtn}>OK</Button>
    </div>
  )
}

還可以使用class來定義react組件，以上代碼用class 改寫後：

import {Button, Input} from 'antd';
import {Component} from 'react';

export default class extends Component{

  constructor(props) {
    super(props);
    this.state = {disableBtn: true}
  }

  inputOnChange(event){
    this.setState({
      disableBtn: event.target.value!=='1234'
    })
  }

  render() {
    return (
      <div>
        <Input onChange={this.inputOnChange.bind(this)}/>
        <Button type="primary" disabled={this.state.disableBtn}>OK</Button>
      </div>
    )
  }
}

實際操作中可在http響應的callback中來改變組件的狀態達到動態刷新的目的。