---
title: NodeType 数据类型
nav:
  path: /Components
  title: Components
group:
  path: /business
  title: 业务组件
---

## NodeType

Demo:

```tsx
import React, { useState } from 'react';
import { NodeType } from 'react-yis-component';

const Demo = () => {
  const [value, setValue] = useState();
  const [valueObject, setValueObject] = useState();

  const options = [
    { value: 'text', label: '文本' },
    { value: 'date', label: '日期' },
    { value: 'number', label: '数字' },
    { value: 'images', label: '图片' },
    { value: 'radio', label: '单选' },
    { value: 'checkbox', label: '复选框' },
    { value: 'richtext', label: '富文本' },
  ];

  const onChange = (value, option) => {
    setValue(value ? value : '');
    setValueObject(option);
    console.log(option);
  };

  return (
    <NodeType
      optionlist={options}
      onChangeDataType={onChange}
      optionvalue={value}
      placeholder="请选择类型"
      onChange={option => {
        setValueObject(option);
        console.log(option);
      }}
      dataJson={valueObject || {}}
    />
  );
};

export default Demo;
```

More skills for writing demo: https://d.umijs.org/guide/demo-principle