Material-ui: प्रतिक्रिया-राउटर से लिंक के साथ लिपटे बटन सफारी में काम नहीं करता

@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>

ऑन टचटैप हैंडलर के बिना, यह क्रोम में काम करता है लेकिन सफारी में नहीं। स्पष्ट हैंडलर के साथ (जो फिर से प्रतिक्रिया-राउटर के transitionTo(...) कॉल करता है, यह सफारी में भी काम करता है।

ऐसा इसलिए हो सकता है क्योंकि फ्लैटबटन <button /> तत्व उत्पन्न करता है और मेरा मानना ​​​​है कि <Link /> एक <a /> तत्व उत्पन्न करता है। तो आपके पास होगा:

<a><button /></a>

एक समाधान जिसे मैं सोच सकता हूं, एक तत्व प्रोप को स्वीकार करने के लिए एन्हांस्ड-बटन को बदलना है जो उपयोगकर्ताओं को कंटेनर तत्व को अनुकूलित करने की अनुमति देगा। तो आप ऐसा करने में सक्षम होंगे:

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

आप सही हे; a तत्व के अंदर का बटन मान्य html5 नहीं है। एक अन्य संभावित समाधान यह होगा कि बटन शैलियों को a तत्वों ( button ) के लिए उपलब्ध कराया जाए, और फिर इसे className साथ सरल स्टाइल किया जाए।

वास्तव में #८४६ के साथ, आप यह करने में सक्षम होंगे:

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

मैंने अभी #८४६ का परीक्षण किया है। इसने स्टाइल को तोड़ दिया (बटन टेक्स्ट सफेद पर सफेद है), और लिंक सक्रिय नहीं है (काम नहीं करता)। मेरे द्वारा परीक्षण किया गया वास्तविक कोड यहां दिया गया है:

<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> ?

@ hai-cea अच्छा, thx!
@antoinerousseau हाँ, <a> में बदलो , एक शैली को तोड़ा ... मूल रूप से text-align: center सेट पाठ को बाईं ओर बदल दिया गया है..क्योंकि अब यह <a> तत्व है

कंटेनर एलिमेंट दस्तावेज नहीं है :(

मैं देख रहा हूँ कि यह सेटअप (जैसे RaisedButton चौड़ाई containerElement={<Link to="/register>} में CSS समस्या है। लहर प्रभाव ठीक से फायरिंग नहीं कर रहा है, वास्तव में यह फायरिंग है लेकिन इतनी देरी के साथ कि मैं इसे लगभग नहीं देख सकता (जब तक मैं लंबे समय तक ऐसे बटन को टैप करें) मैं v0.15.4 का उपयोग कर रहा हूं।

कोई संकेत इसे कैसे तेज करें?

अब और काम नहीं करता

चेतावनी: अज्ञात प्रोप linkButton टैग पर इस प्रोप को तत्व से हटा दें।

@wzup बस linkButton={true} . हटा दें

@wzup यदि आप

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

@ हाई-सी,
नमस्ते,

बटन क्लिक के बाद नेविगेट करने के बाद उपरोक्त कोड में पॉपअप में लॉगिन पेज [मोडल फ़ंक्शन कहें] पर मैं फ़ंक्शन कैसे बना सकता हूं

टक्कर को क्षमा करें लेकिन निम्नलिखित अभी भी 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 को समस्या का समाधान करना चाहिए

सामग्री 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 के समाधान का उपयोग करके मुझे एक चेतावनी मिल रही है:

चेतावनी: सामग्री-यूआई: कृपया घटक संपत्ति के लिए एक वर्ग प्रदान करें।
कीबोर्ड फ़ोकस लॉजिक को सही ढंग से काम करने के लिए एक संदर्भ की आवश्यकता होती है।

कोई सुझाव?

@mht मेरे लिए यह तब काम आया जब मैंने घुंघराले ब्रेसिज़ को हटा दिया:

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

@limakayo लेकिन जब आप गतिशील रूप से लिंक बनाना चाहते हैं तो आप क्या करते हैं?

@mht अच्छा सवाल, मैंने अब घुंघराले ब्रेसिज़ के साथ परीक्षण किया और यह काम किया, मुझे नहीं पता क्यों

किसी को पता है कि कैसे जोड़ना हैऐपबार के शीर्षक में?, मुझे 'ट्रैवल एजेंसी' के शीर्षक पर एक लिंक जोड़ने में सक्षम होना चाहिए

<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-बीटा के साथ उपयोग कर सकते हैं

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

मुझे लगता है कि सामग्री-यूआई अभी भी पुरानी शैली के यूआई ढांचे से संबंधित है, जहां आप सभी बटन शैलियों को नहीं ढूंढ सकते हैं, या सरल बहुत अधिक शैलियों हैं, अगर किसी को मेरे जैसे निम्न स्तर में अनुकूलित करने की आवश्यकता है, तो अंत में मैं खुश हूं 'स्टाइल-घटकों' को सीएसएस, सास, आदि के बारे में अधिक आवश्यकता नहीं है, बस शुद्ध घटकों पर प्रतिक्रिया करें .. आपने बहुत समय, दिन, घंटे खो दिए हैं, यह पता लगाने की कोशिश कर रहे हैं कि बग होने पर किसी चीज़ को कैसे या कहाँ बदला जाए, या प्रतीक्षा करें भविष्य रिलीज ..

@palaniichukdmytro समाधान के लिए धन्यवाद, लेकिन यह बॉटमनेविगेशन एक्शन में रिपल स्टाइल को तोड़ता है

यह मेरे लिए सामग्री-यूआई बटन पर काम करता है:
```
'प्रतिक्रिया' से आयात प्रतिक्रिया
'@ सामग्री-यूआई/कोर/बटन' से आयात बटन
'प्रतिक्रिया-राउटर-डोम' से आयात {लिंक}

कॉन्स्ट सबमिटबटन = () =>
टाइप = "सबमिट करें"
पूर्ण चौड़ाई
संस्करण = "निहित"
रंग = "प्राथमिक"
घटक = {लिंक}
टू = "/ फॉर्म"
>
फार्म जमा करें

नीचे दिए गए कोड के साथ लिंक के साथ बटन प्रस्तुत करने का प्रयास किया, लेकिन दृश्य पर कुछ भी प्रस्तुत नहीं किया जा रहा है:

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

मैं सामग्री-यूआई का उपयोग करके अगले मार्ग के साथ-साथ प्रोप कैसे पास कर सकता हूं?

घटक = {() => (
करने के लिए = {{
पथनाम: 'हैलो-वहाँ',
राज्य: {
हैलो: 'नमस्कार!',
},
}}
/>
)}
आकार = "छोटा"
संस्करण = "निहित"
रंग = "प्राथमिक"
फुलविड्थ = {सच}
>
हैलो बटन

मेरा एक ही सवाल है - कभी इसे हल करें?