Material-ui: لا يعمل الزر المغلف بالرابط من جهاز التوجيه التفاعلي في Safari

mariusk هل يمكن أن تخبرني كيف أضفت مكون الارتباط من جهاز التوجيه

let editLink = <Link to="editTopic"/>;
<IconButton
    linkButton={true}
    onTouchTap={editLink}
    tooltip="Edit forum">
    <i className="material-icons">edit</i>
</IconButton>

لقد لاحظت أنه إذا قمت بإضافة linkButton={true} فأنا بحاجة إلى إضافة المسار إلى عنصر href ، لكن رابط جهاز التوجيه المتفاعل ينشئ علامة الارتساء افتراضيًا.

هذا هو الكود الفعلي:

 <Link to="/login"><FlatButton onTouchTap={this.clickHandler}>{l.l('no', 'Sign in')}</FlatButton></Link>

بدون معالج onTouchTap ، يعمل في Chrome ولكن ليس في Safari. باستخدام المعالج الصريح (الذي يستدعي مرة أخرى transitionTo(...) لجهاز التوجيه التفاعلي ، فإنه يعمل أيضًا في رحلات السفاري.

قد يكون هذا بسبب إنشاء FlatButton عنصر <button /> وأعتقد أن <Link /> يولد عنصر <a /> . لذلك سيكون لديك:

<a><button /></a>

أحد الحلول التي يمكنني التفكير فيها هو تغيير الزر المحسن لقبول خاصية عنصر تسمح للمستخدمين بتخصيص عنصر الحاوية. لذلك ستتمكن من القيام بما يلي:

<FlatButton containerElement={<Link to="/login"/>} />

أنت على حق؛ الزر الموجود داخل عنصر ليس html5 صالحًا. الحل الآخر المحتمل هو إتاحة أنماط الأزرار لعناصر a (بالإضافة إلى button ) ، ثم نمط بسيط باستخدام className .

في الواقع باستخدام # 846 ، ستتمكن من القيام بما يلي:

<FlatButton>
  <Link to="/login/" />
</FlatButton>

لقد اختبرت للتو # 846. لقد كسر التصميم (نص الزر أبيض على أبيض) ، والرابط غير نشط (لا يعمل). هذا هو الكود الفعلي الذي اختبرته:

<FlatButton><Link to="/login">{l.l('no', 'Sign in')}</Link></FlatButton>

بالإضافة إلى مشكلة اللون (التي نتجت عن التصميم الخاص بي) ، وحقيقة أن الرابط لا يزال لا يعمل ، هناك أيضًا مشكلة في التركيز. عند التمرير فوق الرابط المضمن a ، يتم تمييز أجزاء الارتباط فقط ، وليس الزر بالكامل.

mariusk يجب أن تكون قادرًا على القيام بذلك الآن:

<FlatButton
  containerElement={<Link to="/login" />}
  linkButton={true}
  label={l.l('no', 'Sign in')}/>

هذا يبدو ويعمل بشكل مثالي ، شكرا ، عمل رائع!

عندما أقوم بالتبديل إلى هذا ، أتلقى تحذيرات من تسرب ذاكرة EventEmitter. لست متأكدًا مما إذا كانت معالجات النقرات في <Link> أو تلك الموجودة على <EnhancedButton> التي لم تتم إزالتها بشكل صحيح؟ ربما لم يتم فك تحميل <Link> بشكل صحيح؟

يبدو أنه يعمل الآن حتى بدون linkButton={true} ، أليس كذلك؟ عندما يحتوي الزر على Link مقابل containerElement ، يتم تحويله إلى عنصر <a> بدلاً من <button> ؟

@ هاي سييا لطيفة ، تشك!
antoinerousseau نعم ، تحول إلى <a> ، كسر النمط الواحد ... تم تغيير النص الذي تم تعيينه في الأصل إلى text-align: center إلى اليسار..أصبح الآن عنصر <a>

عنصر الحاوية غير موثق :(

أرى أن هذا الإعداد (على سبيل المثال ، RaisedButton width containerElement={<Link to="/register>} به مشكلة CSS. لا يتم إطلاق تأثير Ripple بشكل صحيح ، في الواقع يتم إطلاقه ولكن مع تأخير كبير لدرجة أنني لا أستطيع رؤيته تقريبًا (حتى أقوم اضغط على هذا الزر لفترة أطول). أنا أستخدم v0.15.4.

أي تلميح كيف يمكن تسريع ذلك؟

لم يعد يعمل

تحذير: عنصر غير معروف linkButton على العلامة.

wzup فقط قم بإزالة linkButton={true}

wzup إذا قمت بكتابة التعليمات البرمجية الخاصة بك مثل هذا بدون خاصية linkButton ، فيجب أن تعمل.

<FlatButton
  containerElement={<Link to="/login" />}
/>

@ hai-cea ،
أهلا،

كيف يمكنني إنشاء وظيفة في صفحة تسجيل الدخول [قل وظيفة مشروطة] إلى نافذة منبثقة ، في الكود أعلاه بمجرد التنقل بعد النقر على الزر

العفو عن النتوء ولكن ما يلي لا يزال يولد تحذيرًا في 0.17:

<RaisedButton
      label="Sign In"
      containerElement={<Link to="/login" />}
/>

يولد ما يلي:

تحذير: عنصر غير معروف onTouchTap على العلامة. للحصول على التفاصيل ، راجع https://fb.me/react-unknown-prop

واجهت نفس المشكلة ، لذلك قمت بإنشاء مكون قابل لإعادة الاستخدام يناسبني.

import React from 'react';
import {Component, PropTypes} from 'react';
import FlatButton from 'material-ui/FlatButton';

export default class FlatLinkButton extends Component {

    static propTypes = {
        ...FlatButton.propTypes,
        to: PropTypes.string.isRequired,
        link: PropTypes.func.isRequired,
        label: PropTypes.node.isRequired,
    };

    render() {
        const style = Object.assign({
            color: 'white',
            marginTop: '7px'
        }, this.props.style);

        const props = {
            ...this.props,
            style,
        };

        delete props.to;
        delete props.link;

        const Link = this.props.link;

        return (
            <Link to={this.props.to}>
                <FlatButton {...props}/>
            </Link>
        );
    }
}

استعمال:

import {Link} from 'react-router';
import FlatLinkButton from './FlatLinkButton';

<FlatLinkButton to="/login" link={Link} label="Login"/>

MatthewEdge # 4670 يجب أن يحل المشكلة

في Material UI v1.0.0-alpha20 ، لا يبدو أن هذا يعمل بالنسبة لي:
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

أهلا،

نفس المشكلة ، باستخدام v1.0.0-alpha21 للنماذج الأولية وتلقيت الرسالة containerElement غير معروف. لذا يبدو أن العقار قد تم إسقاطه وانتهى بي الأمر بهذا الحل:

<Button raised dense color="primary" onClick={() => this.props.history.push('/project/4711')}>
  <i className="fa fa-search fa-on-button" aria-hidden="true" />Search
</Button>

HerrVoennchen بأحدث إصدار v1.0.0-beta.3 يجب أن تكون قادرًا على القيام بما يلي:

const LinkWrapper = ({ ...props }) => (
  <Link {...props} />
)

ثم استخدم الغلاف كمكون

<Button to={`/project/${id}`} component={LinkWrapper}>Go</Button>

شكرا على المؤشرHiroAgustin ؛ يبدو أن هذا يعمل في v1.0.0-beta.3 :

<Button
  color="primary"
  to={`/projects/${project.id}`}
  component={props => <Link {...props}/>}
>View</Button>

في 1.0.0-beta.6 باستخدام حلHiroAgustin و hubgit ، أتلقى تحذيرًا:

تحذير: Material-UI: الرجاء توفير فئة لخاصية المكون.
يحتاج منطق تركيز لوحة المفاتيح إلى مرجع للعمل بشكل صحيح.

أي اقتراحات؟

mht بالنسبة لي ، لقد نجحت عندما أزلت الأقواس المتعرجة:

<Button component={Link} to="/customers"> Customers </Button>

limakayo ولكن ماذا تفعل عندما تريد إنشاء الارتباط ديناميكيًا؟

mht سؤال جيد ، لقد اختبرت مع الأقواس المجعدة الآن وقد نجحت ، لا أعرف لماذا

أي شخص يعرف كيفية إضافة ملففي عنوان AppBar؟ ، أحتاج إلى إضافة رابط على العنوان لـ "وكالة السفر"

<AppBar title={"Travel Agency"} iconElementRight={ <div> <Link to="/customers" className="navbar"><FlatButton label="Customers" /></Link> <Link to="/tours" className="navbar"><FlatButton label="Tours" /></Link> </div> } />

يمكننا فقط استخدام مثل هذا مع v1-beta

<Button
  component={({...props}) => <Link to='/path' {...props} />}
>Path</Button>

أعتقد أن واجهة المستخدم المادية لا تزال تنتمي إلى أطر واجهة المستخدم القديمة ، حيث لا يمكنك العثور على جميع أنماط الأزرار التي تجدها ، أو أن البساطة هي أنماط كثيرة جدًا ، إذا احتاج شخص ما إلى التخصيص في مستوى منخفض مثلي ، فأنا سعيد أخيرًا لا تحتاج "العناصر المصممة" إلى مزيد من المعلومات حول css و saas وما إلى ذلك ، فقط تفاعل مع المكونات النقية .. لقد فقدت الكثير من الوقت ، والأيام ، والساعات ، ومحاولة معرفة كيف أو مكان تغيير شيء ما إذا كان هناك خطأ ، أو انتظر الافراج عن المستقبل ..

palaniichukdmytro شكرًا على الحل ، لكنه يكسر التصميم المتموج في BottomNavigationAction

نجح هذا بالنسبة لي على زر واجهة المستخدم المادية:
""
استيراد رد من "رد فعل"
زر استيراد من "@ material-ui / core / Button"
استيراد {Link} من "React-router-dom"

const SubmitButton = () =>
اكتب = "إرسال"
عرض كامل
المتغير = "مضمن"
اللون = "أساسي"
المكون = {Link}
إلى = "/ شكل"
>
تقديم النموذج

حاولت عرض الزر مع Link بالرمز أدناه ، ولكن لم يتم عرض أي شيء في العرض:

<Button
  component={() => (
    <Link
      to={{
        pathname: 'hello-there',
        state: {
          hello: 'HELLO THERE!',
        },
      }}
    />
  )}
  size="small"
  variant="contained"
  color="primary"
  fullWidth={true}
>
  HELLO BUTTON
</Button>

وإلا كيف يمكنني تمرير الدعائم على طول المسار التالي باستخدام واجهة المستخدم المادية؟

المكون = {() => (
إلى = {{
اسم المسار: "مرحبًا هناك" ،
ولاية: {
مرحبًا: "مرحبًا!" ،
} ،
}}
/>
)}
الحجم = "صغير"
المتغير = "مضمن"
اللون = "أساسي"
fullWidth = {صحيح}
>
زر مرحبا

لدي نفس السؤال - حل هذا من أي وقت مضى؟