Question

我使用来自redux-form的Textfield material-ui制作了一个表单，以发送电子邮件。一切都运行良好，除了一件事：当我第一次点击TextField时，窗口向上滚动。有时，焦点停留在TextField上。之后它工作正常

的例子

我的表格：

import React, { PropTypes, Component } from 'react';
import { reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './EmailForm.css';
import theme from '../../../theme/theme';
import { mediaQueries } from '../../../decorators';

export const fields = ['name', 'email', 'subject', 'message'];

const validate = values => {
   ...
};

@mediaQueries
@withStyles(styles)
@reduxForm({
    form: 'EmailForm',
    fields,
    validate
})
export default class EmailForm extends Component {

    static propTypes = {
        fields: PropTypes.object.isRequired,
        handleSubmit: PropTypes.func.isRequired,
        submitting: PropTypes.bool.isRequired,
        mediaQueries: PropTypes.func.isRequired,
    };

    state = {
        mobile: false,
    }

    componentDidMount() {
        this.props.mediaQueries('(max-width: 399px)', () => {
            this.setState({ mobile: true });
        });
        this.props.mediaQueries('(min-width: 400px) and (max-width: 919px)', () => {
            this.setState({ mobile: true });
        });
        this.props.mediaQueries('(min-width: 920px)', () => {
            this.setState({ mobile: false });
        });
    }

    render() {
        const { fields: { name, email, subject, message }, handleSubmit, submitting } = this.props;
        const emailMarginLeft = this.state.mobile ? 0 : '8px';

        // SOME STYLE HERE

        return (
            <form
                className={styles.form}
                onSubmit={handleSubmit} >
                <div className={styles.nameAndEmail}>
                    <TextField style={nameFieldStyle}
                        floatingLabelText="Votre Nom"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(name.touched && name.error) ? name.error : ''}
                        errorStyle={errorStyle}
                        id="nameField"
                        {...name} />
                    <TextField style={emailTextField}
                        floatingLabelText="Votre courriel"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(email.touched && email.error) ? email.error : ''}
                        errorStyle={errorStyle}
                        id="emailField"
                        {...email} />
                </div>
                <div className={styles.subjectAndMessage}>
                    <TextField style={textField}
                        floatingLabelText="Sujet"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(subject.touched && subject.error) ? subject.error : ''}
                        errorStyle={errorStyle}
                        id="sujet"
                        {...subject} />
                    <TextField style={messageTextField}
                        floatingLabelText="Message"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(message.touched && message.error) ? message.error : ''}
                        errorStyle={errorStyle}
                        multiLine
                        rows={5}
                        id="message"
                        {...message} />
                </div>
                <RaisedButton
                    style={buttonStyle}
                    key="submitButton"
                    type="submit"
                    label="Envoyer"
                    primary
                    disabled={submitting} />
            </form>
        );
    }
}

使用表单的组件：

@withStyles(styles)
export default class ContactUs extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(data) {
        // Do stuff
    }

    render() {
        return (
            <div className={styles.contactUs}>
                <h2>Formulaire</h2>
                <EmailForm
                    ref="EmailForm"
                    onSubmit={this.handleSubmit}
                    submitting />
            </div>
        );
    }
}

导入的主题包含用于material-ui样式的颜色。我还发现TextFields的onFocus和onBlur道具不起作用。我试图简单地记录文本，但它不起作用。

更令人讨厌的是，这不是我第一次使用这个emailForm。我在另一个网站上使用它，它工作得很好。

任何人都知道它为什么会发生？

Material-ui Textfield在第一个redux-form / FOCUS上自动向上滚动窗口

0 个答案: