Dva.js 快速上手指南

import React from 'react';
import { render } from 'react-dom';
import { connect } from 'dva';
import { Button, Input } from 'antd';
 
// 定义组件
class App extends React.Component {
  handleSubmit = () => {
    const { dispatch, inputValue } = this.props;
    if (inputValue) {
      dispatch({
        type: 'example/submitItem',
        payload: inputValue,
      });
    }
  };
 
  handleInputChange = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'example/changeInputValue',
      payload: e.target.value,
    });
  };
 
  render() {
    const { inputValue } = this.props;
    return (
      <div>
        <Input
          value={inputValue}
          onChange={this.handleInputChange}
          placeholder="请输入内容"
        />
        <Button onClick={this.handleSubmit}>提交</Button>
      </div>
    );
  }
}
 
// 连接dva
const AppContainer = connect(({ example }) => ({
  inputValue: example.inputValue,
}))(App);
 
// 启动应用
render(<AppContainer />, document.getElementById('root'));

这个示例展示了如何使用 Dva.js 管理状态，并通过 React 组件进行展示。它包括了如何定义组件、如何编写事件处理函数以及如何使用 Dva 的 connect 方法将组件连接到应用状态。最后，它通过 react-dom 的 render 方法将应用渲染到页面上的某个元素中。