在第一次 onChange 之后，React JS 字段失去焦点

Question

我正在使用 redux-form 但是当我开始输入时，焦点第一次出现在反应中。

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

请看下面代码：

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

MentionTextArea 组件：

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

请帮忙！

提前致谢，

Answer 1

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

您必须在 render() 方法之外定义无状态函数，否则它将在每次渲染时重新创建并强制 Field 重新渲染，因为它的组件属性将不同。来自官方的例子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 之后，React JS 字段失去焦点

In react JS fields losing focus after first onChange

reactjs

redux

redux-form

react-redux