http://codingthesmartway.com/learn-redux-introduction-to-state-management-with-react/
https://github.com/seeschweiler/redux-voting/tree/master/src
//
Forked from xgqfrms-GitHub/redux-state-management-react.md
Created
July 7, 2017 01:13
-
-
Save xyzdata/733097991de729ab842d080f7724a571 to your computer and use it in GitHub Desktop.
redux state management react
https://facebook.github.io/react/docs/composition-vs-inheritance.html
请记住，组件可以接受任意
props，包括原始值，React元素或函数。
Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
import React, {Component} from 'react';
const FancyBorder = (props) => {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
const Dialog = (props) => {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {
login: ''
};
}
handleChange(e) {
this.setState({
login: e.target.value
});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
render(props) {
const record = this.props.data;
console.log(`this.props.data`, this.props.data);
return (
<div>
<Dialog
title="Mars Exploration Program"
message="How should we refer to you?"
>
<input
value={this.state.login}
onChange={this.handleChange}
/>
<button
onClick={this.handleSignUp}
>
Sign Me Up!
</button>
</Dialog>
</div>
);
}
}
export {SignUpDialog};
export default SignUpDialog;ant form validate
https://ant.design/components/form-cn/#components-form-demo-validate-other
import React, {Component} from 'react';
import {Form, Icon, Input, Button} from 'antd';
import {DatePicker, TimePicker} from 'antd';
const {MonthPicker, RangePicker} = DatePicker;
// import moment from 'moment';
const FormItem = Form.Item;
const hasErrors = (fieldsError) => {
// 测试数组中的某些元素是否通过由提供的函数实现的测试。
return Object.keys(fieldsError).some(field => fieldsError[field]);
};
const today = new Date().toLocaleString();
class HLF extends Component {
constructor(props) {
super(props);
// this.onChange = this.onChange.bind(this);
// this.onStartChange = this.onStartChange.bind(this);
}
state = {
startValue: today
};
onChange = (field, value) => {
this.setState({
[field]: value,
});
};
onStartChange = (value) => {
console.log('typeof DatePicker value = \n', typeof(value));
console.log('DatePicker value = \n', value);
// value = value._d;
this.onChange('startValue', value);
console.log('DatePicker new value = \n', value);
};
componentDidMount() {
// To disabled submit button at the beginning.
this.props.form.validateFields();
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
clickSearchHandler = (e) => {
e.preventDefault();
console.log('Received values of form: ', e);
let event = e;
alert(event);
};
render() {
// 解构赋值
// alert(this.props.form);
console.log(`this.props.form`, this.props.form);
const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
// Only show error after a field is touched.
const userNameError = isFieldTouched('userName') && getFieldError('userName');
const textError = isFieldTouched('text') && getFieldError('text');
const userTypeError = isFieldTouched('text') && getFieldError('text');
//
const phoneTypeError = isFieldTouched('text') && getFieldError('text');
const emailTypeError = isFieldTouched('email') && getFieldError('email');
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
<FormItem
validateStatus={userNameError ? 'error' : ''}
help={userNameError || ''}
label="登录名"
>
{
getFieldDecorator('userName', {
rules: [{ required: false, message: '登录名' }],
})
(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="登录名" />
)
}
</FormItem>
<FormItem
validateStatus={textError ? 'error' : ''}
help={textError || ''}
label="用户ID"
style={{}}
>
{
getFieldDecorator('text', {
rules: [{ required: false, message: '用户ID' }],
})
(
<Input prefix={<Icon type="idcard" style={{ fontSize: 13 }} />} type="text" placeholder="用户ID" />
)
}
</FormItem>
<FormItem
validateStatus={userTypeError ? 'error' : ''}
help={userTypeError || ''}
label="用户类型"
>
{
getFieldDecorator('text', {
rules: [{ required: false, message: '用户类型!' }],
})
(
<Input prefix={<Icon type="contacts" style={{ fontSize: 13 }} />} placeholder="用户类型" />
)
}
</FormItem>
<FormItem
validateStatus={textError ? 'error' : ''}
help={textError || ''}
label="用户姓名"
style={{}}
>
{
getFieldDecorator('text', {
rules: [{ required: false, message: '用户姓名' }],
})
(
<Input prefix={<Icon type="user-add" style={{ fontSize: 13 }} />} type="text" placeholder="用户姓名" />
)
}
</FormItem>
<br/>
<FormItem
validateStatus={phoneTypeError ? 'error' : ''}
help={phoneTypeError || ''}
label="手机号"
style={{}}
>
{
getFieldDecorator('number', {
rules: [{ required: false, message: '手机号' }],
})
(
<Input prefix={<Icon type="phone" style={{ fontSize: 13 }} />} type="number" placeholder="手机号" />
)
}
</FormItem>
<FormItem
validateStatus={emailTypeError ? 'error' : ''}
help={emailTypeError || ''}
label={<span className="left-spaces">邮箱</span>}
style={{}}
>
{
getFieldDecorator('email', {
rules: [{ required: false, message: '邮箱' }],
})
(
<Input prefix={<Icon type="mail" style={{ fontSize: 13 }} />} type="email" placeholder="邮箱" />
)
}
</FormItem>
<FormItem
validateStatus={textError ? 'error' : ''}
help={textError || ''}
label="激活状态"
style={{}}
>
{
getFieldDecorator('text', {
rules: [{ required: false, message: '激活状态' }],
})
(
<Input prefix={<Icon type="file-text" style={{ fontSize: 13 }} />} type="text" placeholder="激活状态" />
)
}
</FormItem>
<FormItem
validateStatus={textError ? 'error' : ''}
help={textError || ''}
label="有效日期"
style={{}}
>
{
getFieldDecorator('text', {
rules: [{ required: false, message: '有效日期' }],
})
(
<div>
<RangePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
onChange={(e) => this.onStartChange(e)}
/>
</div>
)
}
</FormItem>
<span className="search-spaces"/>
<FormItem>
<Button
icon="search"
type="primary"
htmlType="submit"
id="user-check-search"
onClick={this.clickSearchHandler}
>
查询
</Button>
</FormItem>
</Form>
);
}
}
const WHLF = Form.create({})(HLF);
export {WHLF};
export default WHLF;
/*
用户ID
用户姓名
登录名
手机号
邮箱
激活状态
有效日期
用户类型: 内部用户
*/
ANT bug & solution
https://gist.github.com/xgqfrms-GitHub/4cf5cc3a67a9ed094cf008f13457bfac
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
微盘交易系统
http://weipan.ketongtx.com/microtrade/static/crm/index.html#/stock
18621890550
wayne119