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-form中為field設定預設值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工作筆記-QML中TextInput設定預設值,以及使用正則表示式只能輸入整數
程式執行截圖如下: 原始碼如下: 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