reack初尝试:Dom内容通过map遍历,useState应该如何应用才对呢?

dom内容通过map遍历,useState应该怎么写才不显得冗余又可以正确对上每个input的内容和事件呢?一开始试了对象去堆,但发现语法没对,一直报错 /(ㄒoㄒ)/~~求指导

import React, { useState, Fragment } from 'react'
import { Input, Select, DatePicker, Col, Row } from 'antd'
const { Option } = Select;

const searchData = [
  {
    title: '商品名称',
    type: 1,
    id: 1
  },
  {
    title: '商品品牌',
    type: 1,
    id: 2
  },
  {
    title: '商品编号',
    type: 1,
    id: 3
  },
  {
    title: '商家选择',
    type: 2,
    id: 5
  },
  {
    title: '团队礼包',
    type: 2,
    id: 6
  },
  {
    title: '创建日期',
    type: 3,
    id: 7
  }
]
const GiftSearch = props => {
  const obj = {
    a1:[InputValue1, setInputValue1] = useState(''),
    a2:[InputValue2, setInputValue2] = useState(''),
  } 
  console.log(InputValue,'InputValue')
  return (
    <Row>
      {
        searchData.map(item => {
          const { title, type, id } = item
          return (
            <Row key={id}>
              <Col>{title}:</Col>
              <Col>
                {type === 1 && <Input value={obj[a+id]} onChange={(e)=>`${setInputValue+id(e.target.value)}`} />}
              </Col>
            </Row>
          )
        })
      }
    </Row>
  )
}
export default GiftSearch
阅读 237
评论 2019-09-11 提问
    2 个回答

    使用useRef可以解决

    import React, { useState, Fragment, useRef } from 'react'
    import { Input, Select, Form, DatePicker, Col, Row, Button } from 'antd'
    const { Option } = Select;
    
    const searchData = [
      {
        title: '商品名称',
        showType: 1,
        name: 'proName',
        id: 0
      },
      {
        title: '商品品牌',
        name: 'proBrand',
        showType: 1,
        id: 1
      },
      {
        title: '商品编号',
        name: 'proCode',
        showType: 1,
        id: 2
      },
      {
        title: '商家选择',
        name: 'proChoose',
        showType: 2,
        id: 3
      },
      {
        title: '团队礼包',
        name: 'teamGift',
        showType: 2,
        id: 4
      },
      {
        title: '创建日期',
        begainName: 'regionBeginTime',
        endName: 'regionEndTime',
        showType: 3,
        id: 5
      },
    ]
    const GiftSearch = props => {
      const { current: inputRef } = useRef({})
      let [itemLayout] = useState({
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      })
    
      // 把时间字符串转换成时间戳
      const format = mytime => {
        if (mytime) {
          let dateTmp = mytime.replace(/-/g, '/')   //为了兼容IOS,需先将字符串转换为'2018/9/11 9:11:23'
          let timestamp = Date.parse(dateTmp)    //返回'2018-9-12 9:11:23'的时间戳
          return timestamp
        } else {
          return ''
        }
      }
      /* 搜索事件 */
      const printValues = e => {
        e.preventDefault();
        console.log(inputRef, 'inputRef')
      };
      /* 清空事件 */
      const clearValue = e => {
        this.props.form.resetFields();
    
      };
    
      /* input输入事件 */
      const updateField = (e, name) => {
        inputRef[name || e.target.name] = name ? e : e.target.value
      };
    
      return (
        <Fragment>
          <Form onSubmit={printValues}  {...itemLayout}>
            {searchData.map(item => {
              const { title, name, id,begainName,endName, showType } = item
              return (
                <Form.Item label={title} key={id}>
                  {showType === 1 && <Input name={name} onChange={updateField} />}
                  {
                    showType === 2 && <Select defaultValue={'请选择'} name={name} onChange={val => updateField(val, name)}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                    </Select>
                  }
                  {showType === 3 &&
                    <Col>
                      <DatePicker onChange={(value, dataString) => updateField(format(dataString),begainName)} showTime />
                      <span style={{ margin: '0 10px' }}>至</span>
                      <DatePicker onChange={(value, dataString) => updateField(format(dataString),endName)} showTime />
                    </Col>}
                </Form.Item>
              )
            })}
            <Button onClick={printValues}>查询</Button>
            {/* <Button onClick={clearValue}>清空</Button> */}
          </Form>
        </Fragment>
      );
    }
    export default GiftSearch
    
    评论 赞赏 2019-09-11