반응에서 JS 필드가 첫 번째 이후에 포커스를 잃는다 onChange

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 형태로 새로운 사람들 당신이 거기에 대한 답을 찾을 수 있습니다이 issue 확인하시기 바랍니다에 대한 일반적인 문제입니다 사전에

감사합니다.

render() 메서드 외부에서 상태 비 저장 함수를 정의해야합니다. 그렇지 않으면 렌더링 할 때마다 다시 작성되며 해당 구성 요소 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}/>