在第一次 onChange 后反应 JS 字段失去焦点 [英] In react JS fields losing focus after first onChange

问题描述

我正在使用 redux-form 但是当我开始输入时，焦点第一次在反应中消失了.

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

请看下面的代码:

<字段名称='说明'//onChange={this.handleChange.bind(this)}//值={this.state.description}组件={道具=>{返回 (<MentionTextArea {...props} userTags={userTags} tags={postTags}/>)}}

提及文本区域组件:

从react"导入 React, {Component, PropTypes}import { MentionsInput, Mention } from 'react-mentions'从 './defaultStyle' 导入 defaultStyle类 MentionTextArea 扩展组件 {构造函数(道具){超级(道具)}handleOnChange (e) {this.props.input.onChange(e.target.value);}使成为() {//const { input, meta, ...rest } = this.props;返回 (<提及输入值={this.props.input.value ||''}onChange={this.handleOnChange.bind(this)}单行={假}style={ defaultStyle }markup="@[__display__](__type__:__id__)"><提及触发器="@"数据={this.props.userTags}类型=用户标签"style={{ backgroundColor: '#d1c4e9' }}renderSuggestion={(建议，搜索，突出显示)=>(<div className="用户">{ 高亮显示 }

)}/><提及触发器=#"数据={this.props.tags}类型=标签"style={{ backgroundColor: '#d1c4e9' }}renderSuggestion={(建议，搜索，突出显示)=>(<div className="用户">{ 高亮显示 }

)}/></提及输入>);}}导出默认 MentionTextArea

请帮忙！

提前致谢，

解决方案

这是 redux-form 新手的常见问题，请查看此 issue 你会在那里找到答案.

您必须在 render() 方法之外定义无状态函数，否则它将在每次渲染时重新创建并强制 Field 重新渲染，因为它的组件 prop 将不同.来自官方 redux-form 文档的示例:

//在 render() 方法之外const renderField = (field) =>(<div className="input-row"><input {...field.input} type="text"/>{field.meta.touched &&field.meta.error &&<span className="error">{field.meta.error}</span>}

)//在你的 render() 方法中<Field name="myField" 组件={renderField}/>

I am using redux-form But When I am start typing focus goes out first time in react.

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.

Please see below code:

<Field
        name='description'
       // onChange={this.handleChange.bind(this)}
        //value={this.state.description}
        component={props => {
          return (
            <MentionTextArea  {...props} userTags={userTags} tags={postTags}/> 
          )
        }}

MentionTextArea Component:

import React, {Component, PropTypes} from 'react'
import { MentionsInput, Mention } from 'react-mentions'
import defaultStyle from './defaultStyle'

class MentionTextArea extends Component {
    constructor(props) {
        super(prop)
    }
    handleOnChange (e) {
        this.props.input.onChange(e.target.value); 
    }
    render() {
       // const { input, meta, ...rest } = this.props;
        return (
            <MentionsInput 
                value={this.props.input.value || ''}
                onChange={this.handleOnChange.bind(this)}
                singleLine={false}
                style={ defaultStyle }
                markup="@[__display__](__type__:__id__)"
                >
                   <Mention trigger="@"
                        data={this.props.userTags}
                        type="userTags"
                        style={{ backgroundColor: '#d1c4e9' }}
                        renderSuggestion={ (suggestion, search, highlightedDisplay) => (
                            <div className="user">
                                { highlightedDisplay }
                            </div>
                        )}
                    />
                    <Mention trigger="#"
                        data={this.props.tags}
                        type="tags"
                        style={{ backgroundColor: '#d1c4e9' }}
                        renderSuggestion={ (suggestion, search, highlightedDisplay) => (
                            <div className="user">
                                { highlightedDisplay }
                            </div>
                        )}
                    />
            </MentionsInput>
        );
    }
}

export default MentionTextArea

Please help!

Thanks in advance,

解决方案

It's common problem for people new to redux-form please check this issue you'll find an answer there.

You must define the stateless function outside of your render() method, or else it will be recreated on every render and will force the Field to rerender because its component prop will be different. Example from official redux-form documentation:

// outside your render() method
const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error && 
       <span className="error">{field.meta.error}</span>}
    </div>
  )

// inside your render() method
<Field name="myField" component={renderField}/>

这篇关于在第一次 onChange 后反应 JS 字段失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！