2017-11-10 5 views
0

これは単純ですが、私は数時間それをしています... 私は反応選択要素を持っています。選択をクリアしてDBフィールドをnullに設定する方法を理解できません。React-select現在の選択をクリアせず、nullを選択できるようにしました

コンポーネント

  selectPriority(priority) { 
     this.updateAttribute("priorityId", priority.value) 
     this.updateAttribute("priority", priority.label) 
     } 

select要素

 <Select 
     name="select_priority" 
     value={proposalService.priorityId ? proposalService.priorityId 
       : null} 
     options={priorities.map(p => ({ 
      value: p.id, 
      label: p.name, 
      })) 
      .sort((a, b) => a.label < b.label)} 
     onChange={p => this.selectPriority(p) || null} 
     placeholder="Select Priority" 
     /> 

コンソールエラーリアクト - 選択要素に "X" をクリック

ProposalServiceForm.js:86 Uncaught TypeError: Cannot read property 'value' of null 
at ProposalServiceForm.selectPriority (ProposalServiceForm.js:86) 
at Object.onChange (ProposalServiceForm.js:342) 
at Object.setValue (Select.js:683) 
at Object.clearValue (Select.js:748) 
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69) 
at executeDispatch (EventPluginUtils.js:85) 
at Object.executeDispatchesInOrder (EventPluginUtils.js:105) 
at executeDispatchesAndRelease (EventPluginHub.js:43) 
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) 
at Array.forEach (<anonymous>) 

答えて

1

'x'をクリックすると、オブジェクトではなくselectPriority()関数にnullが送信されます。エラーはnullがプロパティ 'value'を持たないことを示しています(ラベルもありません)。

最も簡単な解決策は、それを割り当てる機能にヌルを試験することであろう。

selectPriority(priority) { 
    this.updateAttribute("priorityId", priority ? priority.value : null) 
    this.updateAttribute("priority", priority ? priority.label : null) 
    } 

または:

selectPriority(priority) { 
    if (priority == null) { 
    this.updateAttribute("priorityId", null) 
    this.updateAttribute("priority", null) 
    } else { 
    this.updateAttribute("priorityId", priority.value) 
    this.updateAttribute("priority", priority.label) 
    } 
} 
関連する問題