# cj-formula-react

**Repository Path**: mxlk/cj-formula-react

## Basic Information

- **Project Name**: cj-formula-react
- **Description**: cj-formula-react
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-03
- **Last Updated**: 2024-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## cj-formula-react

### 安装依赖

```
npm install cj-formula-react
```

### 使用


```js
import { FormulaEditor } from "cj-formula-react";
import React, { useState } from "react";

const varList = [
   {
        code: 'MAIN_BUSINESS_INCOME',
        name: '主营业务收入',
    },
    {
        code: 'MATERIAL_SALES_INCOME',
        name: '材料销售收入',
    },
    {
        code: 'OTHER_BUSINESS_INCOME',
        name: '其他业务收入',
    },
    {
        code: 'MAIN_BUSINESS_COST',
        name: '主营业务成本',
    },
    {
        code: 'BUSINESS_TAX_SURCHARGE',
        name: '营业税金及附加',
    },
    {
        code: 'OPERATING_EXPENSES',
        name: '营业费用',
    },
    {
        code: 'PERFORMANCE_COEFFICIENT',
        name: '绩效系数',
      },
      {
        code: 'ANNUAL',
        name: '年度',
      },
      {
        code: 'QUARTERLY',
        name: '季度',
      },
      {
        code: 'MONTHLY',
        name: '月度',
      },
]

const App = () => {
  const [editorValue, setEditorValue] = useState("#主营业务收入#+#材料销售收入#");
  const [editorValueExp, setEditorValueExp] = useState("MAIN_BUSINESS_INCOME+MATERIAL_SALES_INCOME");
  const [editorValue1, setEditorValue1] = useState("#主营业务收入#");

  const handleChange = (val, valProps) =>{
    setEditorValue(val)
    setEditorValueExp(valProps.calcExpression)
  }

  return <div>
    <Editor key="1" initialValue="2323" value={editorValue} onChangeValue={(val, valProps) => handleChange(val, valProps)} variableList={varList as any}/>
    <Editor key="2" initialValue="2323" value={editorValue1} onChangeValue={setEditorValue1} variableList={varList as any}/>
    <div>{editorValue}  {editorValueExp}</div>
    <div>{editorValue1}</div>
  </div>
}

export default App;
```