Question

我有一个同构应用程序，使用redux-form呈现登录表单，并允许用户输入用户名和密码。

这一切都很好用于客户端，但如果我关闭JS，我似乎无法通过API从表单中获取值。

注意：当表单为GET时，值在url中显示为查询参数，但显然不希望显示敏感数据。

class SignIn extends Component {

    static propTypes = {
        errorMessage: PropTypes.string,
        handleSubmit: PropTypes.func,
        signinUser: PropTypes.func
    }

    statics = {
        fields: [
            {
                name: 'email',
                label: 'Email'
            },
            {
                name: 'password',
                label: 'Password',
                type: 'password'
            }
        ]
    }

    handleFormSubmit({ email, password }) {
        this.props.signinUser({ email, password });
    }

    // renders an alert if field has an error
    renderAlert() {
        if (this.props.errorMessage) {
            return (
                <div className='alert alert-danger'>
                    <strong>Oops!</strong> {this.props.errorMessage}
                </div>
            );
        }

        return false;
    }

    // render the field
    renderField = ({ input, label, name, type, meta: { touched, error }, ...rest }) => (
        <div>
            <label htmlFor={name}>{label}</label>
            <div>
                <input {...input} {...rest} id={name} placeholder={label} type={type} />
                {touched && error && <span className='error'>{error}</span>}
            </div>
        </div>
    );

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

        return (
            <form method='post' onSubmit={handleSubmit((data) => this.handleFormSubmit(data))}>
                {
                    this.statics.fields.map((field, index) =>
                        <fieldset className='form-group' key={index}>
                            <Field
                                className='form-control'
                                component={this.renderField}
                                label={field.label}
                                name={field.name}
                                type={field.type || 'text'}
                            />
                        </fieldset>
                    )
                }
                {this.renderAlert()}
                <button action='submit' className='btn btn-primary'>Sign in</button>
            </form>
        );
    }
}

和路线：

<Route path='/' component={App}>
    <IndexRoute component={Welcome} />
    <Route path='/feature' onEnter={requireAuth} component={Feature} />
    <Route path='/signin' component={Signin} />
    <Route path='/signout' component={Signout} />
    <Route path='/signup' component={Signup} />
</Route>

Answer 1

这是https的用途：）

包含表单的页面应该在https上，它应该是POST到https的终点。

如果您有良好编写的通用代码并且页面在服务器上呈现表单（并且所有JS正在进行的是增强页面），则通过https发布表单应该没问题。

Isomorphic React app - 当JS关闭时如何处理表单提交

1 个答案: