upload button should not allow upload if fields are empty

huangapple
go评论179阅读模式
英文:

upload button should not allow upload if fields are empty

问题

我有三个输入字段和一个上传按钮。我希望上传按钮在其他三个字段填写后能够禁用和启用。我不知道如何实现这个逻辑。我已经附上了包含字段的代码部分。

上传按钮是代码中的最后一个字段。我该如何编写这个逻辑？

  1. <div className='product'>
  2.     {/* ...其他代码... */}
  3.     {apiFetched && relatedPartyDetails?.map((party, index) => (
  4.         <Row key={index}>
  5.             {/* ...其他代码... */}
  6.             <Col lg={4}>
  7.                 <div className='d-flex align-items-center Related_parties'>
  8.                     <p className='mb-0 title-color'>Relation</p>
  9.                     <Autocomplete
  10.                         className='ms-3 mb-3'
  11.                         options={[...parties]}
  12.                         getOptionLabel={(option) => option.label}
  13.                         id={"disable-clearable-relation-party-" + party.party_relation}
  14.                         label="Party Relation"
  15.                         renderInput={(params) => (
  16.                             <TextField {...params} label="Party Relation" variant="standard" />
  17.                         )}
  18.                         defaultValue={relatedPartyDetails.party_relation}
  19.                         getOptionSelected={(option) => option.label === 'test'}
  20.                         onChange={(event, newValue) => { handleRelation(event, newValue, index); setRelation(parties); console.log('parties', parties); console.log('party', party); }}
  21.                         value={parties.find((ele) => ele.value == party.party_relation)}
  22.                         disableClearable
  23.                     />
  24.                 </div>
  25.                 {error && error?.party_relation && <span style={{ color: 'red' }}>{error.party_relation}</span>}
  26.             </Col>
  27.             {relation && <Col lg={2}>
  28.                 <div className='drag-and-drop'>
  29.                     <DropzoneArea
  30.                         Icon="none"
  31.                         filesLimit={1}
  32.                         showPreviews={true}
  33.                         defaultValue={relatedPartyDetails.upload_evidence}
  34.                         showPreviewsInDropzone={false}
  35.                         useChipsForPreview
  36.                         previewGridProps={{ container: { spacing: 1, } }}
  37.                         dropzoneText='Upload Evidence'
  38.                         previewText=""
  39.                         onChange={(file) => handleChangeFile(file[0], index)}
  40.                     />
  41.                 </div>
  42.                 {error && error?.upload_evidence && <span style={{ color: 'red' }}>{error.upload_evidence}</span>}
  43.             </Col>}
  44.         </Row>
  45.     ))}
  46. </div>
英文:

I have three input fields and an upload button.i want the upload button to be disabled and enabled if other three fields have been filled. i don't know how to go about this. i have attached the section of my code that contains the fields

the upload button is the last field in the code. how do I write this logic?

  1.  &lt;div className=&#39;product&#39;&gt;       
  2. &lt;&gt;
  3. {apiFetched &amp;&amp; relatedPartyDetails?.map((party, index) =&gt; (
  4. &lt;Row key={index}&gt;
  5. &lt;&gt;
  6. &lt;Col lg={3}&gt;
  7. &lt;Autocomplete
  8. options={names}
  9. getOptionLabel={(option) =&gt; (option.details?.name)}
  10. id={&quot;disable-clearable-buyer-&quot; + index}
  11. label=&quot;Party&quot;
  12. renderInput={(params) =&gt; (
  13. &lt;TextField {...params} label=&quot;Party 1&quot; variant=&quot;standard&quot; /&gt;
  14. )}
  15. onChange={(event, newValue) =&gt; {
  16. console.log(&#39;test1&#39;);
  17. // names.forEach((ele) =&gt; { 
  18. //     console.log(ele.details.name);
  19. //     console.log(&#39;hurre&#39;,party.buyer==ele.details.name);
  20. console.log(party.buyer);
  21. // })
  22. // console.log(names.find((ele) =&gt; ele.details.name == party.buyer))
  23. handleParties(event, newValue,index,&#39;buyer&#39;);
  24. }}
  25. disabled={isView}
  26. value={names.find((ele) =&gt; ele.details.name === party.buyer)}
  27. disableClearable
  28. /&gt;
  29. {error &amp;&amp; error?.buyer &amp;&amp; &lt;span style={{ color: &#39;red&#39; }}&gt;{error.buyer}&lt;/span&gt;}
  30. &lt;/Col&gt;
  31. &lt;Col lg={3}&gt;
  32. &lt;Autocomplete
  33. options={names}
  34. getOptionLabel={(option) =&gt; ( option.details?.name)}
  35. id={&quot;disable-clearable-shipper-&quot; + index}
  36. label=&quot;Party&quot;
  37. renderInput={(params) =&gt; (
  38. &lt;TextField {...params} label=&quot;Party 2&quot; variant=&quot;standard&quot; /&gt;
  39. )}
  40. onChange={(event, newValue) =&gt; {
  41. handleParties(event, newValue, index,&#39;shipper&#39;);
  42. }}
  43. disabled={isView}
  44. value={(names &amp;&amp; party.shipper) &amp;&amp; names.find((ele) =&gt; ele.details.name === party.shipper)}
  45. disableClearable
  46. /&gt;
  47. {error &amp;&amp; error?.shipper &amp;&amp; &lt;span style={{ color: &#39;red&#39; }}&gt;{error.shipper}&lt;/span&gt;}
  48. &lt;/Col&gt;
  49. &lt;Col lg={4}&gt;
  50. &lt;div className=&#39;d-flex align-items-center Related_parties&#39;&gt;
  51. &lt;p className=&#39;mb-0 title-color&#39;&gt;Relation&lt;/p&gt;
  52. &lt;Autocomplete
  53. className=&#39;ms-3 mb-3&#39;
  54. options={[...parties]}
  55. getOptionLabel={(option) =&gt; option.label}
  56. id={&quot;disable-clearable-relation-party-&quot; + party.party_relation}
  57. label=&quot;Party Relation&quot;
  58. renderInput={(params) =&gt; (
  59. &lt;TextField {...params} label=&quot;Party Relation &quot; variant=&quot;standard&quot; /&gt;
  60. )}
  61. defaultValue={relatedPartyDetails.party_relation}
  62. getOptionSelected={(option) =&gt; option.label === &#39;test&#39;}
  63. onChange={(event, newValue) =&gt; { handleRelation(event, newValue, index); setRelation(parties); console.log(&#39;parties&#39;, parties);console.log(&#39;party&#39;, party); }}
  64. value={parties.find((ele) =&gt; ele.value == party.party_relation)}
  65. disableClearable
  66. /&gt;
  67. &lt;/div&gt;
  68. {error &amp;&amp; error?.party_relation &amp;&amp; &lt;span style={{ color: &#39;red&#39; }}&gt;{error.party_relation}&lt;/span&gt;}
  69. &lt;/Col&gt;
  70. {relation &amp;&amp; &lt;Col lg={2}&gt;
  71. &lt;div className=&#39;drag-and-drop&#39;&gt;
  72. &lt;DropzoneArea
  73. Icon=&quot;none&quot;
  74. filesLimit={1}
  75. showPreviews={true}
  76. defaultValue={relatedPartyDetails.upload_evidence}
  77. showPreviewsInDropzone={false}
  78. useChipsForPreview
  79. previewGridProps={{ container: { spacing: 1, } }}
  80. dropzoneText=&#39;Upload Evidence&#39;
  81. previewText=&quot;&quot;
  82. onChange={(file) =&gt; handleChangeFile(file[0], index)}
  83. /&gt;
  84. &lt;/div&gt;
  85. {error &amp;&amp; error?.upload_evidence &amp;&amp; &lt;span style={{ color: &#39;red&#39; }}&gt;{error.upload_evidence}&lt;/span&gt;}
  86. &lt;/Col&gt;}
  87. &lt;/&gt;
  88. &lt;/Row&gt;
  89. ))}
  90. &lt;/&gt;
  91. &lt;/div&gt;
  92. &lt;/div&gt;

答案1

得分: 0

如果您正在使用material-ui-dropzone，实际上它创建了一个不受控制的Material-UI Dropzone。如果它是不受控制的，那么您将无法获得任何默认支持以禁用组件，而是可以在DropzoneArea的父div上应用CSS属性。

  1. <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled ? "none" : "all" }}>
  2. <DropzoneArea
  3. Icon="none"
  4. filesLimit={1}
  5. showPreviews={true}
  6. defaultValue={relatedPartyDetails.upload_evidence}
  7. showPreviewsInDropzone={false}
  8. useChipsForPreview
  9. previewGridProps={{ container: { spacing: 1 } }}
  10. dropzoneText='Upload Evidence'
  11. previewText=""
  12. onChange={(file) => handleChangeFile(file[0], index)}
  13. />
  14. </div>
  15. style={{ pointerEvents: checkIfConditionIsFulfilled ? "none" : "all" }}

您需要根据您的状态编写checkIfConditionIsFulfilled。

英文:

if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

  1.  &lt;div className=&#39;drag-and-drop&#39; style={{ pointerEvents: checkIfConditionIsFulfilled? &quot;none&quot; : &quot;all }} &gt;
  2. &lt;DropzoneArea
  3. Icon=&quot;none&quot;
  4. filesLimit={1}
  5. showPreviews={true}
  6. defaultValue={relatedPartyDetails.upload_evidence}
  7. showPreviewsInDropzone={false}
  8. useChipsForPreview
  9. previewGridProps={{ container: { spacing: 1, } }}
  10. dropzoneText=&#39;Upload Evidence&#39;
  11. previewText=&quot;&quot;
  12. onChange={(file) =&gt; handleChangeFile(file[0], index)}
  13. /&gt;
  14. &lt;/div&gt;
  15. style={{ pointerEvents: checkIfConditionIsFulfilled? &quot;none&quot; : &quot;all }}

You will need to write checkIfConditionIsFulfilled on the basis of your states.

答案2

得分: 0

添加一个状态变量来保存字段的值，以及一个初始状态，其中上传按钮被禁用。

  1. const [fieldValues, setFieldValues] = useState({ party1: '', party2: '', partyRelation: '', isUploadButtonDisabled: true });

更新handleParties和handleRelation函数以更新字段的值并检查是否所有字段都已填写：

  1. const handleParties = (event, newValue, index, partyType) => {
  2.   setFieldValues(prevValues => ({
  3.     ...prevValues,
  4.     [partyType]: newValue ? newValue.details.name : ''
  5.   }));
  6. };
  8. const handleRelation = (event, newValue, index) => {
  9.   setFieldValues(prevValues => ({
  10.     ...prevValues,
  11.     partyRelation: newValue ? newValue.value : ''
  12.   }));
  13. };

更新JSX：

  1. <Button disabled={fieldValues.party1 === '' || fieldValues.party2 === '' || fieldValues.partyRelation === ''}>上传</Button>

希望对你有所帮助！ ^^

英文:

Add a state variable to hold the field values and an initial state where the upload button is disabled

  1. const [fieldValues, setFieldValues] = useState({ party1: &#39;&#39;,party2: &#39;&#39;, partyRelation: &#39;&#39;, isUploadButtonDisabled: true });

Update the handleParties and handleRelation functions to update the field values and check if all fields are filled:

  1. const handleParties = (event, newValue, index, partyType) =&gt; {
  2. setFieldValues(prevValues =&gt; ({
  3. ...prevValues,
  4. [partyType]: newValue ? newValue.details.name : &#39;&#39;
  5. }));
  6. };
  7. const handleRelation = (event, newValue, index) =&gt; {
  8. setFieldValues(prevValues =&gt; ({
  9. ...prevValues,
  10. partyRelation: newValue ? newValue.value : &#39;&#39;
  11. }));
  12. };

Update the JSX:

  1. &lt;Button disabled={ fieldValues.party1 === &#39;&#39; || fieldValues.party2 === &#39;&#39; || fieldValues.partyRelation === &#39;&#39; }&gt; Upload &lt;/Button&gt;

Hope it helps!! ^^

huangapple
  • 本文由 发表于 2023年6月26日 14:42:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76554118.html
  • autocomplete
  • material-ui
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定