Material-ui: [FlatButton] إدخال الملف لا يعمل مع الزر.

في الإصدار 0.7.5.

nschaubeck هل يعمل الزر الموجود في موقع المستند من أجلك؟

@ hai-cea نعم يفعل ذلك. يبدو أنه لم يكن هناك حتى عنصر <input> _in_ DOM ، مثل أن عنصر الزر لم يجعله أطفالًا.

أواجه هذه المشكلة أيضًا. nschaubeck هل سبق لك أن وجدت حلاً؟

@ e-monson لم أتمكن في الواقع من إيجاد حل.

هذا يعمل!
دع الأنماط = {
exampleImageInput: {
المؤشر: "المؤشر" ،
الموقف: "مطلق" ،
أعلى: "0" ،
أسفل: "0"،
اليمين: "0" ،
اليسار: "0"،
العرض: 100٪ ،
العتامة: "0"
}
}

      <FlatButton label="Choose an Image" primary={true}>
        <input id="imageButton" style={styles.exampleImageInput} type="file"></input>
      </FlatButton>

nikhildaga الذي يعمل فقط على Chrome لأن وضع حقول الإدخال في الأزرار ليس جزءًا من مواصفات W3C.

حل مختلف هو جعل الزر يطلق فقط حدث النقر لحقل إدخال مخفي.

handleChange: function(e){
  console.log(e.target.value)
},
_openFileDialog: function(){
  var fileUploadDom = React.findDOMNode(this.refs.fileUpload);
  fileUploadDom.click();
},
render: function() {
  return (
    <FlatButton
      label="Upload file"
      onClick={this._openFileDialog}/>
    <input
      ref="fileUpload"
      type="file" 
      style={{"display" : "none"}}
      onChange={this._handleChange}/>
  );
}

أرى أن هذه المشكلة لا تزال غير ثابتة بشكل صحيح ...
الحل المقترح في المستند يعمل فقط في Chrome كما قال Wofiel . (لا يزال الحال كذلك في النسخة التجريبية 15-0.2)

أليس من الأفضل أن تكون قادرًا على تعيين مثل htmlFor إلى <FlatButton> (أو <RaisedButton> ) ، قم بتعيين معرف لملف الإدخال وهذا كل شيء؟ لن تحتاج إلى تشغيل النقرة يدويًا ...
حاولت لف الزر في الملصق ، للأسف ، هذا لا يعمل :(

في الوقت الحالي ، يبدو أن Wofiel هو الحل الأفضل.

لماذا نغلق هذا عندما لا يكون هناك حل أصلي

hiWofiel كيف تقترح استخدام هذه التقنية بدون المراجع في مكون عديم الحالة

excalliburbd يمكنك استخدام id و Jquery ، يجب أن يعمل ذلك

Birssan dom التلاعب في رد فعل؟ هل هذا مقبول؟

لن أنصح بذلك عادةً ، لكنني أعتقد أن تشغيل حدث نقرة يجب أن يكون جيدًا في هذه الحالة

Wofiel كما يمكن القيام به مع الإصدار 15 رد فعل؟

Wofiel مع هذا الحل console.log(e.target.value) تلقي واحد
ج: \ fakepath \ imagefilename.png
أفضل الحلول
e.target.files [0]

إذا واجه أي شخص آخر هذه المشكلة ، وجدت أنه يمكنك تعيين containerElement على RaisedButton ليكون شيئًا أكثر ملاءمة لوجود عنصر إدخال كطفل. على سبيل المثال تسمية ؛-)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" />
</RaisedButton>

@ Thomas101 شكرا! لقد واجهت هذه المشكلة للتو ويبدو أن الحل الخاص بك يعمل.
مدهش :)

@ Thomas101 شكرا للمعلومات. هذا حل مشكلتي أيضا. الفعلية

فقط استكمالًا لإجابة @ Thomas101 ، عندما أعلن عن المكونات مثل مثاله ، يتم تقديم زر RaisedButton الخاص بي مع إدخال ملف بالداخل. لمنع حدوث ذلك ، ما عليك سوى تعيين نمط إدخال الملف على display: none . :)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" style={{ display: 'none' }} />
</RaisedButton>

andreyluiz تحت أي ظروف لا يعمل هذا:

<RaisedButton label='My Label'>
    <input type="file" />
</RaisedButton>

لم أتمكن من العثور على مشكلة في مثال موقع المستندات ، ولكن من الواضح أن العديد من الآخرين لديهم هذه المشكلة!

هل يتم استبداله بإدخال الملف لعدم إظهار الكود الذي قدمته؟

هذا غريب. في حالتي ، يتم عرض إدخال ملف داخل زر material-ui.

andreyluiz نعم ، مع مثال موقع المستندات (http://www.material-ui.com/#/components/raised-button) لا يوجد <input> . ما المتصفح والإصدار الذي تستخدمه في الاختبار؟

أحدث إصدار من Chrome.

أتفق مع andreyluiz و يظهر أيضًا ، ولكن مع style={{display: 'none'}} ، فإنه يعمل مثل السحر!

TL ؛ د

<RaisedButton
  containerElement="label"
  icon={<Icons.FileUpload />} // material-ui-icons
  labelColor="white"
  primary
  style={{ minWidth: 40, width: 40 }}>
  <input
    onChange={e => this.upload(e.target.files[0])}
    style={{ display: 'none' }}
    type="file"
  />
</RaisedButton>

يبدو أن الحل أعلاه لا يعمل بعد الآن. أنا أستخدم فرع الإصدار التجريبي الجديد من الإصدار 1 وما يلي لا يصلح لي

                        <Button dense
                                containerElement="label"
                                label="label">
                            <input
                                onChange={e => this.upload(e.target.files[0])}
                                style={{display: 'none'}}
                                type="file"
                            />
                        </Button>

أحصل على الخطأ التالي في وحدة التحكم:

Warning: React does not recognize the `containerElement` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead.
If you accidentally passed it from a parent component, remove it from the DOM element.

أي شخص يعرف الحل؟ على أي حال ، ألا يجب دعم حالة الاستخدام الشائعة هذه في الأصل؟ (بطريقة غير معقدة)

@ AdityaAnand1 يجب أن تعمل التعليمات البرمجية التالية

<Button
            raised
            component="label" <---- use component instead of containerElement
            color="primary"
            className={buttonClassname}
            disabled={this.state.loading}
            onClick={this.handleButtonClick}
          >
            {'Upload'}
            <FileUpload className={classes.rightIcon} />
            <input
              onChange={e => console.log(e.target.files[0])}
              style={{ display: 'none' }}
              type="file"
            />
</Button>