field 输入框

用户可以在文本框内输入或编辑文字。

Props参数

名称	类型	是否必传	默认值	描述
value	string | number	✅	-	值
type	TFieldType	否	-	输入框类型
placeholder	string	否	-	占位提示符
fieldProps	InputProps	否	-	原生inputProps
allowClear	boolean	否	-	是否运行清空

示例

import { memo, useState } from 'react'
import { View } from '@tarojs/components'
import MMField from '../../components/field'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

const Component = () => {
  const [checked, setChecked] = useState(false)
  const [select, setSelect] = useState('')
  const [textare, settextare] = useState('')

  return (
    <MMPageContainer title="输入框">
      <NormalField />

      <PageDemoBlock title="设置">
        <View>右侧值区域对齐方式</View>
        <View className="spacing" />
        <MMField label="value 左对齐" valueAlign="left" value={textare} onChange={settextare} />
        <MMField label="value 居中" valueAlign="center" value={textare} onChange={settextare} />
        <MMField label="value 右对齐" value={textare} onChange={settextare} />
      </PageDemoBlock>

      <PageDemoBlock title="高级组件">
        <View>Field内置了许多高级组件</View>
        <View className="spacing" />
        <MMField.Switch label="切换器" name="addArr" checked={checked} onChange={setChecked} />
        <MMField.Select
          label="选择框"
          name="Select"
          value={select}
          options={[
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' }
          ]}
          onChange={setSelect}
        />
        <MMField.TextArea label="文本框" name="TextArea" value={textare} onChange={settextare} />
      </PageDemoBlock>

      <CityField />
    </MMPageContainer>
  )
}

const FieldPage = memo(Component)
export default FieldPage

function NormalField() {
  const [text, setText] = useState('')
  const [amount, setAmount] = useState('')

  return (
    <PageDemoBlock title="使用">
      <View>以下是基础示例</View>
      <View className="spacing" />
      <MMField label="普通输入框" name="normalField" placeholder="请输入内容" value={text} onChange={setText} />
      <MMField label="纯数字" name="number" value={amount} type="digit" onChange={setAmount} />
    </PageDemoBlock>
  )
}

/**
 * 城市选择
 *
 * @return {*}
 */
function CityField() {
  const [addressInfo, setAddressInfo] = useState({
    mobile: '',
    name: '',
    defaulted: false,
    address: '',
    coords: '',
    tag: undefined,
    addArr: []
  })

  const updateInputValue = (data) => setAddressInfo((pre) => ({ ...pre, ...data }))

  return (
    <PageDemoBlock title="城市选择">
      <View>演示了如何使用 rules规则校验</View>
      <View className="spacing" />
      <MMField.CityPicker label="城市选择" name="addArr" value={addressInfo.addArr} onChange={(addArr) => updateInputValue({ addArr })} />

      <MMField
        label="详细地址"
        labelStyle={{ width: 70 }}
        name="address"
        required={false}
        rules={[
          {
            required: true,
            validate(_r, value) {
              if (value.length < 4) {
                return Promise.reject(new Error('请输入正确的收货地址'))
              }
              return Promise.resolve(true)
            }
          }
        ]}
        value={addressInfo.address}
        placeholder="详细地址,例如:1号楼6层601"
        onChange={(val) => {
          updateInputValue({ address: val })
        }}
      />
    </PageDemoBlock>
  )
}