在 React ES6 中，为什么输入字段在输入字符后失去焦点? [英] In React ES6, why does the input field lose focus after typing a character?

查看：26
本文介绍了在 React ES6 中，为什么输入字段在输入字符后失去焦点?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我下面的组件中，输入字段在输入字符后失去焦点.在使用 Chrome 的 Inspector 时，看起来整个表单都在重新呈现，而不仅仅是输入字段的 value 属性.

我没有从 eslint 和 Chrome Inspector 中得到任何错误.

当表单位于渲染的返回中或作为单独的组件导入时，提交表单本身的工作方式与实际输入字段一样，但不是我在下面对其进行编码的方式.

为什么会这样?

主页组件

import React, { Component, PropTypes } from 'react';从'react-redux'导入{连接}；从redux"导入 { bindActionCreators };import * as actionPost from '../redux/action/actionPost';从 './form/InputText' 导入 InputText；从 './form/InputSubmit' 导入 InputSubmit；类_PostSingle 扩展组件{构造函数(道具，上下文){超级(道具，上下文)；this.state = {邮政: {标题: ''，},};this.onChange = this.onChange.bind(this);this.onSubmit = this.onSubmit.bind(this);}onChange(事件){this.setState({邮政: {标题:event.target.value，},});}提交(事件){event.preventDefault();this.props.actions.postCreate(this.state.post);this.setState({邮政: {标题: ''，},});}使成为() {const onChange = this.onChange;const onSubmit = this.onSubmit;const valueTitle = this.state.post.title;const FormPostSingle = () =>(<form onSubmit={onSubmit}><InputText name="title" label="Title" placeholder="输入标题" onChange={onChange} value={valueTitle}/><InputSubmit name="保存"/></表单>);返回 (<main id="main" role="main"><div className="容器流体"><FormPostSingle/>

</main>);}}_PostSingle.propTypes = {动作:PropTypes.objectOf(PropTypes.func).isRequired,};函数 mapStateToProps(state) {返回 {帖子:state.posts，};}函数 mapDispatchToProps(dispatch) {返回 {动作:bindActionCreators(actionPost, dispatch),};}导出默认连接(mapStateToProps，mapDispatchToProps)(_PostSingle)；

文本输入组件

import React, { PropTypes } from 'react';const InputText = ({ name, label, placeholder, onChange, value, error }) =>{const fieldClass = 'form-control input-lg';让 wrapperClass = 'form-group';如果(错误&& error.length> 0){wrapperClass += '有错误';}返回 (<div className={wrapperClass}><label htmlFor={name} className="sr-only">{label}</label><input type="text" id={name} name={name} placeholder={placeholder} onChange={onChange} value={value} className={fieldClass}/>{错误&&<div className="alert alert-danger">{error}</div>}

);};InputText.propTypes = {名称:PropTypes.string.isRequired，标签:PropTypes.string.isRequired，占位符:PropTypes.string.isRequired，onChange: PropTypes.func.isRequired,值:PropTypes.string，错误:PropTypes.string，};InputText.defaultProps = {值:空，错误:空，};导出默认输入文本；

提交按钮组件

import React, { PropTypes } from 'react';const InputSubmit = ({ name }) =>{const fieldClass = 'btn btn-primary btn-lg';返回 (<input type="submit" value={name} className={fieldClass}/>);};InputSubmit.propTypes = {名称:PropTypes.string，};InputSubmit.defaultProps = {name: '提交',};导出默认输入提交；

解决方案

这是因为您在 render() 内的函数中渲染表单.

每次你的 state/prop 改变时，函数都会返回一个新的表单.它让你失去了注意力.

尝试将函数内部的内容直接放入渲染中.

<div className="container-fluid"><FormPostSingle/>

</main>

===>

<div className="container-fluid"><form onSubmit={onSubmit}><InputText name="title";标签=标题"placeholder="输入标题";onChange={onChange} value={valueTitle}/><InputSubmit name="Save";/></表单>

</main>

In my component below, the input field loses focus after typing a character. While using Chrome's Inspector, it looks like the whole form is being re-rendered instead of just the value attribute of the input field when typing.

I get no errors from either eslint nor Chrome Inspector.

Submitting the form itself works as does the actual input field when it is located either in the render's return or while being imported as a separate component but not in how I have it coded below.

Why is this so?

Main Page Component

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionPost from '../redux/action/actionPost';
import InputText from './form/InputText';
import InputSubmit from './form/InputSubmit';

class _PostSingle extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            post: {
                title: '',
            },
        };
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onChange(event) {
        this.setState({
            post: {
                title: event.target.value,
            },
        });
    }
    onSubmit(event) {
        event.preventDefault();
        this.props.actions.postCreate(this.state.post);
        this.setState({
            post: {
                title: '',
            },
        });
    }
    render() {
        const onChange = this.onChange;
        const onSubmit = this.onSubmit;
        const valueTitle = this.state.post.title;
        const FormPostSingle = () => (
            <form onSubmit={onSubmit}>
                <InputText name="title" label="Title" placeholder="Enter a title" onChange={onChange} value={valueTitle} />
                <InputSubmit name="Save" />
            </form>
        );
        return (
            <main id="main" role="main">
                <div className="container-fluid">
                    <FormPostSingle />
                </div>
            </main>
        );
    }
}

_PostSingle.propTypes = {
    actions: PropTypes.objectOf(PropTypes.func).isRequired,
};

function mapStateToProps(state) {
    return {
        posts: state.posts,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actionPost, dispatch),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(_PostSingle);

Text Input Component

import React, { PropTypes } from 'react';

const InputText = ({ name, label, placeholder, onChange, value, error }) => {
    const fieldClass = 'form-control input-lg';
    let wrapperClass = 'form-group';
    if (error && error.length > 0) {
        wrapperClass += ' has-error';
    }
    return (
        <div className={wrapperClass}>
            <label htmlFor={name} className="sr-only">{label}</label>
            <input type="text" id={name} name={name} placeholder={placeholder} onChange={onChange} value={value} className={fieldClass} />
            {error &&
                <div className="alert alert-danger">{error}</div>
            }
        </div>
    );
};

InputText.propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    placeholder: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string,
    error: PropTypes.string,
};

InputText.defaultProps = {
    value: null,
    error: null,
};

export default InputText;

Submit Button Component

import React, { PropTypes } from 'react';

const InputSubmit = ({ name }) => {
    const fieldClass = 'btn btn-primary btn-lg';
    return (
        <input type="submit" value={name} className={fieldClass} />
    );
};

InputSubmit.propTypes = {
    name: PropTypes.string,
};

InputSubmit.defaultProps = {
    name: 'Submit',
};

export default InputSubmit;

解决方案

it is because you are rendering the form in a function inside render().

Every time your state/prop change, the function returns a new form. it caused you to lose focus.

Try putting what's inside the function into your render directly.

<main id="main" role="main">
    <div className="container-fluid">
        <FormPostSingle />
    </div>
</main>

===>

<main id="main" role="main">
    <div className="container-fluid">
        <form onSubmit={onSubmit}>
            <InputText name="title" label="Title" placeholder="Enter a title" onChange={onChange} value={valueTitle} />
            <InputSubmit name="Save" />
        </form>
    </div>
</main>

这篇关于在 React ES6 中，为什么输入字段在输入字符后失去焦点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆