在第一次 onChange 后反应 JS 字段失去焦点

Question

我正在使用 redux-form 但是当我开始打字时，焦点第一次在反应中熄灭。

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

请看下面的代码：

<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}/>