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

对于那些刚接触还原形式的人来说，这是常见的问题请查看issue你会在那里找到答案。

您必须在render（）方法之外定义无状态函数，否则它将在每个渲染上重新创建并强制Field重新渲染，因为它的组件prop会有所不同。来自官方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}/>

反应JS领域在第一次改变后失去焦点

1 个答案: