nyx_server/ui/app/components/UserForm.js

Node内容发布

import React from 'react';
import {Form , Input , Button} from 'antd';
const FormItem = Form.Item;
const createForm = Form.create;

class UserForm extends React.Component {


  handleReset(e) {
    e.preventDefault();
    this.props.form.resetFields();
  }

  handleSubmit(e) {
    e.preventDefault();
    const {formData , submitCb} = this.props;
    //验证formData中是否有错误。如果有错误则不执行下去
    var name = formData.name.value;
    var realName = formData.realName.value;
    var password = formData.password.value;
    var contact = formData.contact.value;
    var department = formData.department.value;
    submitCb({
       name,realName,password,contact,department
    });
  }


  onFieldChange(name, event) {
      const _self = this;
      const {setFormField , userExist} = this.props;
      setFormField(name, event.target.value);
      if (name == "name") {
          (function(value) {
              clearTimeout(_self.onNameChangeId);
              _self.onNameChangeId = setTimeout(function() {
                  userExist(value);
              }, 300);
          }(event.target.value));
      }
  }

  render() {

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };

    const {formData , form , errorInfo} = this.props;
    return (
      <Form horizontal form={form}>
        <div>{errorInfo}</div>
        <FormItem
          {...formItemLayout}
          label="用户名:"
          help={formData.name.error}
        >
          <Input value={formData.name.value} placeholder="用户名" onChange={this.onFieldChange.bind(this,"name")}/>
        </FormItem>


        <FormItem
          {...formItemLayout}
          label="姓名:"
          hasFeedback
          help={formData.realName.error}
          >
          <Input placeholder="姓名" value={formData.realName.value} onChange={this.onFieldChange.bind(this,"realName")}/>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="密码:"
          hasFeedback
          help={formData.password.error}
          >
          <Input type="password" placeholder="密码" value={formData.password.value} onChange={this.onFieldChange.bind(this,"password")}/>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="确认密码:"
          hasFeedback
          help={formData.confirmPassword.error}
          >
          <Input type="password" placeholder="确认密码" value={formData.confirmPassword.value} onChange={this.onFieldChange.bind(this,"confirmPassword")}/>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="部门：">
          <Input placeholder="部门" value={formData.department.value} onChange={this.onFieldChange.bind(this,"department")}/>
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="联系方式：">
          <Input placeholder="用户手机或其他联系方式" value={formData.contact.value} onChange={this.onFieldChange.bind(this,"contact")}/>
        </FormItem>

        <FormItem wrapperCol={{ span: 12, offset: 7 }}>
          <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
          &nbsp;&nbsp;&nbsp;
          <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

UserForm = createForm()(UserForm);

export default UserForm;