前端 ！！！
onfinish
antd 3 中的form表单提交时，有onSubmit事件，而antd 4中则换成了onFinish事件，并且当使用onfinish事件时，要注意不能同时给Button绑定onClick事件视图出发提交。因为会请求两次提交事件，并且第一次接收不到值会导致提交失败或异常。
<Form.Item className="login-item">
<Button type="primary" htmlType="submit" className="login-form-button" style={{width: '100%'}}>登陆</Button>
<p style={{color: '#8f8f8f', fontSize: '12px', marginTop: '20px', textAlign: 'center'}}>用户名:admin，密码: admin</p>
</Form.Item>
控制 表单数据域
antd 3中使用getFieldDecorator 结合 Form.create。
import { Form, Icon, Input, Button } from 'antd';
function hasErrors(fieldsError) {
return Object.keys(fieldsError).some(field => fieldsError[field]);
}
class HorizontalLoginForm extends React.Component {
componentDidMount() {
// To disable 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);
}
});
};
render() {
const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
// Only show error after a field is touched.
const usernameError = isFieldTouched('username') && getFieldError('username');
const passwordError = isFieldTouched('password') && getFieldError('password');
return (
<Form layout="inline" onSubmit={this.handleSubmit}>
<Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>,
)}
</Form.Item>
<Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>,
)}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
Log in
</Button>
</Form.Item>
</Form>
);
}
}
const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);
ReactDOM.render(<WrappedHorizontalLoginForm />, mountNode);
我们推荐使用 Form.useForm 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 ref 获取数据域。
这一点来看 antd 4 使用Form简单了很多。
全屏
使用react-full-screen，但要注意的是，useFullScreenHandle必须在函数组件中使用
import { FullScreen, useFullScreenHandle } from "react-full-screen";
const handle = useFullScreenHandle();
<FullScreen
handle={handle}
style={{ background: "#ffffff" }}
>
...
{!this.props.fullScreen ? <FullscreenOutlined onClick={() => this.fullScreenHandle(true)} /> :
<FullscreenExitOutlined onClick={() => this.fullScreenHandle(false)}/>}
</FullScreen>
fullScreenHandle = (tag) => {
tag ? handle.enter() : handle.exit();
}
这里为了使用redux而使用redux，其实获取全屏状态可以直接从handle中获取handle.active 就是状态。
