我正在使用 redux-form 但是当我开始输入时,焦点第一次在react中消失。
在我下面的组件中,输入字段在输入字符后失去焦点。在使用 Chrome 的 Inspector 时,看起来整个表单都在重新呈现,而不仅仅是输入字段的 value 属性。
请看下面的代码:
<Field
name='description'
// onChange={this.handleChange.bind(this)}
//value={this.state.description}
component={props => {
return (
<MentionTextArea {...props} userTags={userTags} tags={postTags}/>
)
}}
提及TextArea 组件:
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
请帮忙!
提前致谢,