在反應JS領域失去焦點後首先onChange

我使用的是形式但是當我開始輸入焦點第一次在反應。在反應JS領域失去焦點後首先onChange

在下面的組件中，輸入字符後輸入字段丟失焦點。在使用Chrome的Inspector時，看起來整個表單在輸入時將被重新渲染，而不僅僅是輸入字段的值屬性。

請參見下面的代碼：

<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

請幫幫忙！

由於提前，

來源

2017-09-12 Vipul Patel

你能告訴你怎麼繪製形式 –

<形式的onSubmit = {this.formSubmit.bind（本）}> <字段名稱= '描述' //的onChange = {this.handleChange.bind（本）} //value={this.state.description} 成分= {道具=> { 回報（） }} let connection = connect（mapStateToPr OPS，mapDispatchToProps） VAR reduxConnectedComponent =連接（CreatePostForm）出口默認reduxForm（{ 形式： 'CreatePost' //這種形式的唯一標識符}）（reduxConnectedComponent） –

你給一個關鍵的地方是唯一產生。還可以嘗試'let connection = connect（mapStateToProps，mapDispatchToProps）var reduxConnectedComponent = reduxForm（{form：'CreatePost'//這個表單的唯一標識符}）導出默認連接（reduxConnectedComponent）' –

它是人們新的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}/>

來源

2017-09-12 09:36:32 mradziwon

我已經看到這個，但不工作.. –

什麼是不工作，你使用箭頭函數來創建MentionTextArea。你不能這樣做。這是在每個渲染上構造一個新的組件函數。所以你的輸入失去了焦點是正常的行爲。查看文檔中的示例（https://redux-form.com/7.0.4/docs/api/field.md/#2-a-stateless-function）並重寫您的代碼。 – mradziwon

謝謝...它在工作 –

在反應JS領域失去焦點後首先onChange

回答

相關問題