How to use the @alicloud/console-components.Field function in @alicloud/console-components

To help you get started, we’ve selected a few @alicloud/console-components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github aliyun / alibabacloud-console-components / packages / component / src / components / field / demo / demo9.js View on Github external
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>
github aliyun / alibabacloud-console-components / packages / component / src / components / form / demo / demo12.js View on Github external
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()
                 });
                 */
      },
    })
github aliyun / alibabacloud-console-components / packages / component / src / components / field / demo / demo1.js View on Github external
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>
github aliyun / alibabacloud-console-components / packages / component / src / components / field / demo / demo6.js View on Github external
...action.payload,
      }
    default:
      return state
  }
}

class Demo extends React.Component {
  componentWillReceiveProps(nextProps) {
    this.field.setValues({
      email: nextProps.email,
      newlen: nextProps.email.length,
    })
  }

  field = new Field(this, {
    onChange: (name, value) => {
      console.log('onChange', name, value)
      this.field.setValue('newlen', value.length)
      this.props.dispatch({
        type: 'save_fields',
        payload: {
          [name]: value,
        },
      })
    },
  })

  setEmail() {
    this.props.dispatch({
      type: 'save_fields',
      payload: {