@aliretail/react-materials-components/demo/FormComponents/input.md

B 端物料组件库

---
title: Input
order: 20
---

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { setup, SchemaForm, SchemaMarkupField: Field } = FormComponents;

setup();

const App = () => {
  return (
    <SchemaForm
      defaultValue={{
        text: '233',
        readOnly: 'aaa',
      }}
      onChange={console.log}
    >
      <Field
        title="Text"
        name="text"
        tips="23333333"
        required
        x-component="Input"
        x-component-props={{
          placeholder: 'input',
          showLimitHint: true,
          maxLength: 10,
        }}
      />
      <Field title="TimePicker" name="timePicker" x-component="TimePicker" />

      <Field
        title="readOnly"
        name="readOnly"
        readOnly
        x-component="Input"
        x-component-props={{
          placeholder: 'input',
          readOnlyRender: (props) => {
            return <div style={{ color: 'red' }}>{props.value}</div>;
          },
        }}
      />
    </SchemaForm>
  );
};

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