How to use @alicloud/console-components - 10 common examples

return (
      
        {this.state.value.map((v, i) => {
          return <button>{v}</button>
        })}
        <button type="primary">
          Add ＋{' '}
        </button>
      
    )
  }
}

/* eslint-disable react/no-multi-comp */
export default class Demo9 extends React.Component {
  field = new Field(this, {
    deepReset: true,
  })

  onGetValue() {
    console.log(this.field.getValue('custom'))
  }

  render() {
    const { init, setValue, reset } = this.field

    return (
      <div>
        
        <br>
        <br>
        </div>

import React from 'react'
import { Form, Input } from '@alicloud/console-components'

const FormItem = Form.Item

const handleSubmit = e => {
  e.preventDefault() // form will auto submit if remove this line
  console.log('onsubmit')
}

const Demo9 = () => (
  <form>
    
      <input placeholder="Enter Key can also trigger ‘onSubmit’">
    
    submit
  </form>
)

export default Demo9

constructor(props) {
    super(props)
    this.field = new Field(this, {
      onChange: (name, value) => {
        console.log('onChange', name, value, this.field.getValues())
        this.props.dispatch({
          type: 'save_fields',
          payload: {
            [name]: value,
          },
        })
        /* Method 2, Updates all values.
                 this.props.dispatch({
                 type: 'save_fields',
                 payload: this.field.getValues()
                 });
                 */
      },
    })

import React from 'react'
import { Form, Input } from '@alicloud/console-components'

const FormItem = Form.Item

function handleSubmit(v) {
  console.log(v)
}

const Demo2 = () => (
  <div>
    <form>
      
        
          <input placeholder="first" style="{{" name="first">
        
        
          <input placeholder="second" style="{{" name="second">
        
      </form></div>

import React from 'react'
import { Input, Button, Field } from '@alicloud/console-components'
import styled from 'styled-components'

export default class Demo1 extends React.PureComponent {
  field = new Field(this, { forceUpdate: true })

  onGetValue() {
    console.log(this.field.getValue('input'))
  }

  render() {
    const { init, setValue, reset } = this.field

    return (
      
        <input>
        <br>
        <br>
        <button type="primary">
          getValue
        </button>

const Demo4 = () => {
  const myField = Field.useField()

  const { init, getError, setError, setErrors } = myField
  return (
    
      <input>
      <br>

const Demo10 = () => {
  const myField = Field.useField({
    parseName: true,
    values: {
      objWithDefaults: {
        a: 1,
        b: 2,
      },
    },
  })

  const onGetValue = () => {
    console.log(myField.getValues())
  }

  const onSetValue = () => {
    myField.setValues({
      obj: {

const Demo7 = () => {
  const myField = Field.useField({
    deepReset: true,
  })
  const { init } = myField

  return (
    <div>
      <select style="{layout}">
        jack
        lucy
        
          disabled
        
        hugohua
      </select>
      <br>
</div>

const Demo8 = () => {
  const myField = Field.useField()
  const { init } = myField

  return (
    <div>
      
        checked
      
      <br>
      
        defaultChecked
      
      <br>
      </div>

const Demo3 = () => {
  const myField = Field.useField({
    onChange: (name, value) => {
      console.log(myField.getValues())
      switch (name) {
        case 'input':
          myField.setValue('sync', `change to: ${value}`)
          break
        case 'select':
          myField.setValue('sync', `${value} is coming`)
          break
        case 'range':
          myField.setValue('sync', ` (${value.join(',')}) ready`)
          break
      }
    },
  })