react-开发经验分享-form表单组件中封装一个单独的inp

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

在form表单中自定义封装一个input组件

如果不做处理

form表单提交时是获取不到这个自定义组件的数据的

这个坑对于新手来说

真的是个大坑

特别是对表单内的元素做提交不是很了解的人

用ant的ui框架来说明吧

一个基础的表单

// ant表单组件
import { Form, Select, Input, Button } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

class App extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  handleSelectChange = (value) => {
    console.log(value);
    this.props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          label="Note"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 12 }}
        >
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          label="Gender"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 12 }}
        >
          {getFieldDecorator('gender', {
            rules: [{ required: true, message: 'Please select your gender!' }],
          })(
            <Select
              placeholder="Select a option and change input text above"
              onChange={this.handleSelectChange}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
            </Select>
          )}
        </FormItem>
        <FormItem
          wrapperCol={{ span: 12, offset: 5 }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </FormItem>
      </Form>
    );
  }
}

App = Form.create({})(App);
export default App;

如果我们要自定义Select组件
在组件内部做后端数据请求
并渲染到子元素Option里
那么我们就需要从新封装自定义这个原生的Select组件

// 把Select单独提取出来
import React, { Component } from 'react';
import { Select, Icon } from 'antd';

import initialApi from './services/initialApi'; // 封装的后端接口请求

class SelectForm extends React.Component {
  constructor(props) {
    super(props);

    const value = props.value || {};
    this.state = {
      staffList: [], // 列表
    }
  }

  // 获焦时查询后端数据
  onFocus = () => {
    this.onRequstStaffData(this.props.organizationId);
  }

  // 查询数据
  onRequstStaffData = async (inquireId) => {
    let staffInquireData = {
      organizationId: `${inquireId}`,
      isDeleted: false,
      pageIndex: 0,
      pageSize: 9,
    } // 请求体
    let staffData = await initialApi.postStaff(staffInquireData);
    let staffList = staffData.extension || [];
    
    this.setState({
      staffList,
    })
  }

  // Select 数据变化时读取 value 值
  handleChange = (value) => {
    this.triggerChange(value);
  }

  // triggerChange 方法把获取到的 value 值返回给父级 form 表单 
  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    
    if(onChange) {
      onChange(changedValue);
    }
  }

  render() {
    return (
      <Select style={{width: 200}} suffixIcon={<Icon type="team" style={{color: 'rgba(0, 0, 0, 0.38)'}} />} onChange={this.handleChange}
        defaultValue={`${this.props.user.profile.name}`} notFoundContent="没有查询到数据！" onFocus={this.onFocus}
      >
        <OptGroup label="Manager">
          {this.state.staffList.map((item, index) => {
            return (
              <Option key={item.id} value={item.trueName}>{item.trueName}</Option>
            )
          })}
        </OptGroup>
      </Select>
    )
  }
}

export default SelectForm;

并把这个自定义组件导入到原来的form表单里

// 修改后的ant表单组件
import { Form, Select, Input, Button } from 'antd';
import SelectForm from './selectForm';

const FormItem = Form.Item;

class App extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          label="Note"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 12 }}
        >
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          label="Gender"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 12 }}
        >
          {getFieldDecorator('gender', {
            rules: [{ required: true, message: 'Please select your gender!' }],
          })(
            <SelectForm organizationId={'传给SelectForm的值'} user={'传给SelectForm的值'} />
          )}
        </FormItem>
        <FormItem
          wrapperCol={{ span: 12, offset: 5 }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedApp = Form.create()(App);