爲什麼父母組件在設置狀態時不更新輸入組件？

Question

我有一個輸入組件是這樣的：

let InputBasic = React.createClass({ 
    displayName: 'InputBasic', 
    path: '', 
    componentWillMount: function() { 
     this.path = this.props.storePath + '.' + this.props.storeIndex; 
    }, 

    getInitialState: function() { 
     return { }; 
    }, 

    getError: function() { 
     if (!Array.isArray(this.props.formErrorFields)) { 
      return false; 
     }; 

     __this = this; 
     let hasError = false; 
     this.props.formErrorFields.forEach(function (index) { 
      if (__this.props.name == index.name) { 
       hasError = true; 
       return; 
      } 
     }); 

     return hasError; 
    }, 

    sendToValidation: function() { 
     if (this.props.rules) { 
      bom.form.validateInput(
      /* Vars here */ 
      ); 
     } 
    }, 

    getClassName: function() { 

     if(this.getError()) { 

      return 'input-basic has-error'; 
     } 
     else { 
      return 'input-basic'; 
     } 
    }, 

    onBlur: function() { 
     this.sendToValidation(); 
    }, 

    handleChange: function (event) { 
     this.setState({ value: event.target.value }); 
    }, 

    render: function() { 

     return React.createElement('input', 
      { 
       type: this.props.type, 
       placeholder: this.props.placeholder, 
       style: this.props.style, 
       onChange: this.handleChange, 
       onBlur: this.onBlur, 
       className: this.getClassName() 
      } 
     ); 
    } 
}); 

我們的想法是，以驗證對模糊輸入字段。如果輸入未通過驗證，則包含表單狀態將被更改。形式setState（）函數作爲道具傳遞給輸入，然後傳遞給驗證等等。

該邏輯在設置窗體狀態時起作用。表單狀態相應地設置。我還有另一個組件，它依賴於表單狀態並且完美地工作。但是，輸入組件並未像我期望的那樣更新。

在以下情況下我有問題：

• 空，初始輸入 - >點擊觸發的onblur - >驗證失敗 - 在輸入>輸入組件更新
• 類型 - >點擊觸發的onblur - >驗證成功 - >輸入組件更新
• 取下再次輸入文本 - >點擊觸發的onblur - >驗證失敗 - >輸入組件未更新
• 再次輸入添加文本 - >點擊觸發的onblur - >驗證成功 - >輸入組件確實更新

這是奇特的，因爲表格內的其他元素都被更新了。如果我將onUpdate（）添加到onBlur函數，則組件會按預期進行更新。但是，這個解決方案感覺很不好，特別是因爲我不明白爲什麼我沒有得到所需的效果。其中排在我的腦海裏

事情，而試圖解決這個問題：

• 可這由以下事實引起的，該組件觸發更新過程，最終指向自己？我試圖在這裏問的是，這是一個問題，我作爲道具傳遞setState函數？
• 當涉及到更新時，輸入組件是否有所不同？

編輯：

難道這是因爲的onChange功能造成的？這不是在這個例子中，因爲太嘮叨太長的代碼示例。

更多編輯：

我顯然是如何分配的值;如果對兒童的更新推出的狀態影響。

這是我用它來更新輸入父狀態的功能：

bom.form = { 

    getErrorField: function (fields, name, text) { 
     let newFields = fields; 
     if (fields[name]) { 
      newFields[name].hasError = true; 
      newFields[name].errorText = text; 
     } 
     return newFields; 

    }, 

    validateInput: function (inputValue, inputName, inputRules, setFormState, formFields) { 
     let fields = formFields; 
     if (!inputValue && inputRules.required) { 
      let text = 'This field is required.'; 
      fields = this.getErrorField(formFields, inputName, text); 
     } 
     state = {}; 
     state.fields = fields; 

     return setFormState(state); 
    } 
}; 

因此，呼籲validateInput（）我我設定輸入的父組件的狀態。

這不會在輸入組件中啓動更新。但是，如果我將state.fields賦值更改爲：

state.fields = { password: {}, username: {}} 

它根據需要啓動更新。當然，在這個例子中，國家並不是我想要的，這僅僅是爲了表達的目的。

奇怪的是，在這兩種情況下，另一個不同的子組件（我稱之爲fieldMessage）會更新。它被這樣渲染：

return React.createElement('p', null, this.getText()); 

getText（）函數返回指向右側字段的父組件狀態。

所以我已經成爲了結論，我的問題有一些事情要做，我如何將狀態對象分配給setState（）函數。我對麼？發生這種情況是因爲我將當前狀態傳遞給子函數，並且我可能使用對象引用將原始文件放在錯誤的地方，或者類似的東西？

Answer 1

您沒有將您的onBlur處理程序綁定到您的反應類。特別是：

render: function() { 

    return React.createElement('input', 
     { 
      type: this.props.type, 
      placeholder: this.props.placeholder, 
      style: this.props.style, 
      onChange: this.handleChange, 
      onBlur: this.onBlur.bind(this), 
      className: this.getClassName() 
     } 
    ); 
} 

這是因爲，this.sendToValidation();最終被稱爲綁定到事件的目標。

Answer 2

我被分配這樣的state.fields解決了這個問題：

state.fields = Object.create(fields); 

我認爲原來的字段都指向原始狀態對象的引用，因此沒有推出更新。然而，這只是我的猜測，如果有人能夠澄清我的行爲，我將非常感激。