@aliretail/react-materials-components/demo/LandlineNumber/multiState.md

B 端物料组件库

---
title: multiState
order: 1
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { LandlineNumber } from '@aliretail/react-materials-components';

class App extends Component {
  state = {
    readOnlyValue: {
      areaCode: '1234',
      seatNumber: '1234',
      extensionNumber: '1234',
    },
    isPreviewValue: {
      areaCode: '1234',
      seatNumber: '1234',
      extensionNumber: '1234',
    },
    disabledValue: {
      areaCode: '1234',
      seatNumber: '1234',
      extensionNumber: '1234',
    },
    msg: '',
  };

  render() {
    return (
      <>
        <h1>readOnly: 只读状态</h1>
        <LandlineNumber
          readOnly
          value={this.state.readOnlyValue}
          onChange={(val) => {
            this.setState({
              readOnlyValue: val,
            });
          }}
        />
        <h1>isPreview: 预览状态</h1>
        <LandlineNumber
          isPreview
          value={this.state.isPreviewValue}
          onChange={(val) => {
            this.setState({
              isPreviewValue: val,
            });
          }}
        />
        <h1>disabled: 不可编辑状态</h1>
        <LandlineNumber
          disabled
          value={this.state.disabledValue}
          onChange={(val) => {
            this.setState({
              disabledValue: val,
            });
          }}
        />
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```