Material-ui: Button umschlossen mit Link vom React-Router funktioniert nicht in Safari

@mariusk Könnten Sie mir bitte sagen, wie Sie die Link-Komponente vom React-Router zur Button-Komponente hinzugefügt haben. Wenn ich zum Beispiel etwas wie das Folgende mache, funktioniert es nicht.

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

Ich stelle fest, dass, wenn ich linkButton={true} hinzufüge, ich die Route zum href Element hinzufügen muss, aber der reagierende Router Link generiert standardmäßig das Anker-Tag.

Hier ist der eigentliche Code:

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

Ohne den onTouchTap-Handler funktioniert es in Chrome, aber nicht in Safari. Mit dem expliziten Handler (der wiederum das transitionTo(...) React-Router aufruft, funktioniert es auch in Safari.

Dies könnte daran liegen, dass FlatButton ein <button /> Element generiert und ich glaube, dass <Link /> ein <a /> Element generiert. Sie haben also:

<a><button /></a>

Eine Lösung, die mir einfällt, besteht darin, die erweiterte Schaltfläche so zu ändern, dass sie eine Element-Requisite akzeptiert, mit der Benutzer das Containerelement anpassen können. Sie können also Folgendes tun:

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

Du hast recht; Schaltfläche innerhalb eines a-Elements ist kein gültiges HTML5. Eine andere mögliche Lösung wäre, die Schaltflächenstile für a -Elemente (zusätzlich zu button ) verfügbar zu haben und sie dann einfach mit className .

Mit #846 können Sie Folgendes tun:

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

Ich habe gerade #846 getestet. Es hat das Styling beschädigt (Button-Text ist weiß auf weiß) und der Link ist nicht aktiv (funktioniert nicht). Hier ist der eigentliche Code, den ich getestet habe:

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

Neben dem Farbproblem (das durch mein eigenes Styling verursacht wurde) und der Tatsache, dass der Link immer noch nicht funktioniert, gibt es auch ein Fokusproblem. Wenn Sie mit der Maus über den eingebetteten a Link fahren, werden nur die Linkteile hervorgehoben, nicht die gesamte Schaltfläche.

@mariusk Das sollte jetzt möglich sein:

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

Das sieht perfekt aus und funktioniert perfekt, danke, tolle Arbeit!

Wenn ich zu diesem wechsle, erhalte ich EventEmitter-Speicherleckwarnungen. Ich bin mir nicht sicher, ob es die Klickhandler auf <Link> oder die auf <EnhancedButton> sind, die nicht richtig entfernt werden? Vielleicht wird <Link> nicht richtig ausgehängt?

Sieht so aus, als ob es jetzt auch ohne linkButton={true} funktioniert, oder? Wenn die Schaltfläche Link für containerElement hat, wird sie in ein <a> Element anstatt in ein <button> .

@hai-cea schön, thx!
@antoinerousseau ja, werde zu <a> , habe den einen Stil gebrochen... der Text, der ursprünglich auf text-align: center , wurde in links geändert..da es jetzt ein <a> Element ist

containerElement ist nicht dokumentiert :(

Ich sehe, dass dieses Setup (zB RaisedButton width containerElement={<Link to="/register>} ein CSS-Problem hat. Der Ripple-Effekt wird nicht richtig ausgelöst. Tatsächlich wird er ausgelöst, aber mit so viel Verzögerung, dass ich ihn fast nicht sehen kann (bis ich Tippen Sie länger auf diese Schaltfläche.) Ich verwende v0.15.4.

Irgendein Tipp, wie man es beschleunigen kann?

Funktioniert nicht mehr

Warnung: Unbekannte Requisite linkButton auf Tag.

@wzup entferne einfach das linkButton={true}

@wzup Wenn Sie Ihren Code ohne linkButton-Requisite so schreiben, sollte es funktionieren.

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

@hai-cea,
Hallo,

Wie kann ich eine Funktion auf der Anmeldeseite [sagen modale Funktion] zum Popup erstellen, im obigen Code, sobald er nach dem Klicken auf die Schaltfläche navigiert?

Verzeihen Sie die Beule, aber das Folgende erzeugt immer noch eine Warnung bei 0.17:

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

Erzeugt folgendes:

Warnung: Unbekannte Requisite onTouchTap auf Tag. Weitere Informationen finden Sie unter https://fb.me/react-unknown-prop

Ich hatte das gleiche Problem, also habe ich eine wiederverwendbare Komponente erstellt, die für mich funktioniert.

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>
        );
    }
}

Verwendungszweck:

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

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

@MatthewEdge #4670 sollte das Problem lösen

In Material UI v1.0.0-alpha20 scheint dies für mich nicht zu funktionieren:
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

Hi,

gleiches Problem, Verwendung von v1.0.0-alpha21 für das Prototyping und die Meldung containerElement ist unbekannt. Die Eigenschaft scheint also fallen gelassen und ich bin bei dieser Lösung gelandet:

<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 mit der neuesten Version v1.0.0-beta.3 sollten Sie in der Lage sein:

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

Und dann den Wrapper als Komponente verwenden

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

Danke für den Hinweis @HiroAgustin; das scheint in v1.0.0-beta.3 zu funktionieren:

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

In 1.0.0-beta.6 mit @HiroAgustin und @hubgits Lösung

Warnung: Material-UI: Bitte geben Sie eine Klasse für die Komponenteneigenschaft an.
Die Tastaturfokuslogik benötigt eine Referenz, um richtig zu funktionieren.

Irgendwelche Vorschläge?

@mht für mich hat es funktioniert, als ich die geschweiften Klammern entfernt habe:

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

@limakayo Aber was machst du, wenn du den Link dynamisch erstellen

@mht gute Frage, ich habe jetzt mit den geschweiften Klammern getestet und es hat funktioniert, ich weiß nicht warum

weiß jemand, wie man a hinzufügtim Titel von AppBar ? muss ich einen Link zum Titel für 'Reisebüro' hinzufügen können

<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> } />

wir können es einfach so mit v1-beta verwenden

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

Ich denke, Material-UI gehören immer noch zu alten UI-Frameworks, bei denen Sie nicht alle Schaltflächenstile finden können, die Sie finden, oder einfach zu viele Stile sind, wenn jemand wie ich auf niedrigem Niveau anpassen muss, bin ich endlich zufrieden damit 'styled-components' keine Notwendigkeit mehr über CSS, Saas usw., reagieren Sie einfach auf reine Komponenten zukünftige Veröffentlichung..

@palaniichukdmytro danke für die Lösung, aber sie bricht das Ripple-Styling in BottomNavigationAction

Das hat bei mir auf einer Material-UI-Schaltfläche funktioniert:
```
Reagieren aus 'reagieren' importieren
Importieren Sie die Schaltfläche von '@material-ui/core/Button'
import { Link } from 'react-router-dom'

const SubmitButton = () =>
type="senden"
Gesamtbreite
Variante="enthalten"
color="primär"
Komponente={Link}
to="/form"
>
Formular senden

Es wurde versucht, die Schaltfläche mit Link mit dem folgenden Code zu rendern, aber in der Ansicht wird nichts gerendert:

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

Wie kann ich sonst mit material-ui Requisiten an die nächste Route weitergeben?

Komponente={() => (
zu={{
Pfadname: 'Hallo-dort',
Zustand: {
hallo: 'HALLO DORT!',
},
}}
/>
)}
Größe = "klein"
Variante="enthalten"
color="primär"
fullWidth={true}
>
HALLO-TASTE

Ich habe die gleiche Frage - jemals gelöst?