我正在使用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
请帮忙!
提前致谢,
答案 0 :(得分:2)
对于那些刚接触还原形式的人来说,这是常见的问题请查看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}/>