1. 程式人生 > >Redux-form中為field設定預設值initialvalue

Redux-form中為field設定預設值initialvalue

嘗試了很多種方法想要為field新增預設值,剛開始先使用了placeholder,但是並不能直接編輯,只能起到提示資訊的作用,後來終於找到了解決辦法,如下:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../actions/users';

const form = reduxForm({
  form: 'UserEdit',
  validate
});

const renderField = ({ input, type, placeholder, value, label, meta: { touched, error } }) => (
  <div className={`input-group ${touched && error ? 'has-error' : ''}`}>
    <input type={type} placeholder={placeholder} value={value} label={label} {...input} />
    { touched && error && <div className="error">{error}</div> }
  </div>
);

class UserEdit extends Component {
  componentDidMount() {
    this.handleInitialize();
  }

  handleInitialize() {
    const initData = {
      //這裡可以改為你想要設定的值,前面的鍵值如“id”要和你Field中的name值相同,
      //我這裡呼叫的是前一個頁面傳過來的值
      "id": this.props.params.id,
      "firstname": this.props.params.firstname,
      "lastname": this.props.params.lastname,
      "email": this.props.params.email,
    };

    this.props.initialize(initData);
  }

  handleFormSubmit(formProps) {
    // 這裡的editUser是自己定義的一個action,這裡實現的是編輯功能 
    this.props.editUser(formProps);
  }
  deleteUserSubmit(idx) {
    // 這裡的deleteUser是你自己定義的一個action,這裡實現的是刪除功能  
    this.props.deleteUser(idx);
  }


  renderUsers(){
    const { handleSubmit } = this.props;

    return (
      <div className="edituser">
        
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <h3>
          <label>Id:</label>
          <Field name="id" type="text" component={renderField} readOnly = "true"/>
          <label>First Name:</label>
          <Field name="firstname" type="text" component={renderField}/>

          <label>Last Name:</label>
          <Field name="lastname" type="text" component={renderField}/>

          <label>Email:</label>
          <Field name="email" component={renderField} type="text" />
          </h3>
          {
            // 提交編輯事件
          }
          <button action="submit" className="user-add-bottom">Save changes</button>
          {
           // 將刪除事件繫結到button上
          }
          <button type="butthon" className="user-add-bottom" onClick={handleSubmit(this.deleteUserSubmit.bind(this))}>Delete</button>
        </form>
      </div>
    )
  }
  render() {
    return (
      <div className="content users">
        <h1>User Detail</h1>
        { this.renderUsers() }
        
      </div>
    )
  }
}
//校驗
function validate(formProps) {
  const errors = {};
  const fields = ['formProps.firstname', 'formProps.lastname', 'formProps.email'];
  
  if (!formProps.firstname) {
    errors.firstname = 'Please enter a first name';
  }
  if (!formProps.lastname) {
    errors.lastname = 'Please enter a last name';
  }
  if (!formProps.email) {
    errors.email = 'Please enter an email';
  }


  if (formProps.firstname&& formProps.firstname.length < 3) {
    errors.firstname = 'minimum of 4 characters';
  }
  if (formProps.firstname&& formProps.firstname > 20) {
    errors.firstname = "maximum of 20 characters";
  }

  if (formProps.lastname&& formProps.lastname < 3) {
    errors.firstname = "minimum of 4 characters";
  }
  if (formProps.lastname&& formProps.lastname > 20) {
    errors.firstname = "maximum of 20 characters";
  }

  if(formProps.email && !/^[A-Z0-9._%+-]
[email protected]
[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formProps.email)) { errors.email = "please provide valid email"; } return errors; } function mapStateToProps(state) { return { user: state.user }; } export default connect(mapStateToProps, actions)(form(UserEdit));

成功執行之後的圖片如下:直接可以將引數顯示出來,而不用自己再手動輸入了。

相關推薦

Redux-formfield設定預設initialvalue

嘗試了很多種方法想要為field新增預設值,剛開始先使用了placeholder,但是並不能直接編輯,只能起到提示資訊的作用,後來終於找到了解決辦法,如下: import React, { Component } from 'react'; import { Field

儲存過程+呼叫儲存過程+無/帶參的儲存過程+in引數+out引數+int out引數+引數設定預設

儲存過程 1儲存過程是一組為了完成特定功能的SQL語句集 2儲存過程編譯後儲存在資料庫中 3執行儲存過程比執行儲存過程封裝的SQl語句集更有效率 4不能指定declare關鍵字 5: OUT 和 IN OUT 的形參不能有預設表示式,只有in引數可以設

Ant Design Pro,用setFieldsValue方法,給巢狀到Form表單的DatePicker元件設定預設

 其實用setFieldsValue或者獲取setState方法都可以設定DatePicker的預設值。 setState方法: <FormItem label="日期選擇框"> {getFieldDecorator('date', {

odoo開發筆記 -- 模型欄位定義設定預設

例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res.company']._c

element ui 的時間選擇器怎麼設定預設/el-date-picker區間選擇器怎麼這是預設

template程式碼 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" type="daterange" align="ri

HTML公用函式——日期空的時候設定預設

日期為空的時候,傳輸資料報錯,為日期設定預設值,傳輸資料到後臺  function ChangeNullDate(cellval) { if (cellval) { return cellval;

資料庫中欄位設定預設系統時間

資料庫中欄位設定預設值為系統時間 方法1 使用工具建表時在預設值欄設定為: (getDate()) 方法2 使用以下語句建立欄位並設定它的預設值: alter table 表名 add 建立的欄位名 DateTime default GETDATE() no

beetl模板引擎for迴圈以及select設定預設的判斷

<#select id="salesOfficesId" name="售樓處" >        @for(offices in officesList){             &nb

element-ui的select下拉列表 設定預設

element-ui中的select下拉列表如何設定預設值? 在element-ui的運用中,涉及到了select下拉列表。專案中需要將select的預設值給展示出來 那如何修改呢? 上element-ui中的程式碼片段 <template&g

SpringMVC標籤補充:從路徑、校正引數、設定預設

一、@PathVariable 從路徑中取值例如:@RequestMapping("/{url}") public String Muchpage(@PathVariable String url) { return url; }二、@RequestParam

SQL Server,給欄位設定約束,設定預設注意事項

使用sql語句給某個欄位設定約束並設定預設值的時候,需要先將原先的約束刪除,然後再新建約束設定預設值,否則報錯。 刪除約束: --找約束名然後 alter table tablenamedrop constraint constratintname; 新建約束,

關於Mysql的日期型別欄位設定預設當前日期的解決方案

很多人可能會吧日期型別的欄位的型別設定為 date或者 datetime, 但是這兩個型別是無法設定預設值為當前日期的(或者有我不清楚) **因為**MySQL目前欄位的預設值不支援函式 所以 方案一: 把型別設定為date/datetime等,預設值

java 反射: 當Timestamp型別的屬性null時,設定預設

import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.sql.Timestamp; class Person {

android專案spinner設定預設

spinner用介面卡裝載完資料後, 再設定spinner預設值 1. 根據選項或選項位置來設定spinner預設值, 如: 進入該activity後, spinner預設值為選項"情感生活"(表示筆

DB2查詢時如果null設定預設

今天在查詢中遇到一個問題,那就是在做左連線查詢時,右表沒有資料,DB2會給一個預設的null值,但在ibatis中我是用int型別接收的,所以就會報錯。 在網上查了一下發現SQL語句中是可以在查詢不到

######日期元件設定預設。【###《和日期元件沒有關係》至今不知道哪個js。設定input的value格式化的即可。】

===【UI實現了。提交表單,是否傳遞日期資料正確?待測。。。】===實現效果:===程式碼:form頁js://預設過濾時間 $(function () { defaultTime() }) function defaultTime(){ var timet

Qt工作筆記-QMLTextInput設定預設,以及使用正則表示式只能輸入整數

程式執行截圖如下: 原始碼如下: import QtQuick 2.5 import QtQuick.Window 2.2 Window { visible: true wid

powerdesigner 設定預設設定空約束

 1、powerdesigner 設定預設值。  用工具開啟表,找到Columns,然後選中你要修改的欄位值,點屬性。    找到Standard Checks,default選擇即可。如下圖:  2、設定不為空約束等。  如下圖:  在Column Properti

設定PowerShell的cmdlet引數預設

今天我們來看下PowerShell中早在3.0版本的時候就引進的設定預設值功能。 $PSDefaultParameterValues主要是為Cmdlet和高階函式指定設定自定義值,下來讓我們通過幾個例子詳細看看具體如何使用。 我們可以使用如下基本語法為Cmdlet的預設值設

PowerDesigner如何給字串欄位設定預設

在PowerDesigner12.5中,給varchar或nvarchar等字串型別的欄位設定預設值時,總是有問題,在表屬性的columns頁面中選中要設定的欄位,點選屬性按鈕後,在Standard Checks中設定Default為'' 但是,在匯入到MS SQLServ