自定义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中来改变组件的状态达到动态刷新的目的。