Material-ui: Tombol yang dibungkus dengan Tautan dari router reaksi tidak berfungsi di Safari

@mariusk Bisakah Anda memberi tahu saya bagaimana Anda menambahkan komponen Tautan dari router reaksi ke komponen Tombol. Misalnya, jika saya melakukan sesuatu seperti berikut ini, itu tidak berhasil.

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

Saya perhatikan bahwa jika saya menambahkan linkButton={true} saya perlu menambahkan rute ke elemen href , tetapi react router Link menghasilkan tag anchor secara default.

Berikut kode sebenarnya:

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

Tanpa penangan onTouchTap, ini berfungsi di Chrome tetapi tidak di Safari. Dengan handler eksplisit (yang lagi-lagi memanggil transitionTo(...) react-router itu juga berfungsi di safari.

Ini mungkin karena FlatButton menghasilkan elemen <button /> dan saya yakin <Link /> menghasilkan elemen <a /> . Jadi Anda akan memiliki:

<a><button /></a>

Salah satu solusi yang dapat saya pikirkan adalah mengubah tombol yang disempurnakan untuk menerima prop elemen yang memungkinkan pengguna untuk menyesuaikan elemen kontainer. Jadi Anda akan dapat melakukan:

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

Kamu benar; tombol di dalam elemen a bukan HTML5 yang valid. Solusi lain yang mungkin adalah memiliki gaya tombol yang tersedia untuk elemen a (selain button ), dan kemudian gaya sederhana dengan className .

Sebenarnya dengan #846, Anda dapat melakukan:

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

Saya baru saja menguji #846. Itu merusak gaya (teks tombol berwarna putih di atas putih), dan tautannya tidak aktif (tidak berfungsi). Inilah kode aktual yang saya uji:

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

Selain masalah warna (yang disebabkan oleh gaya saya sendiri), dan fakta bahwa tautan masih tidak berfungsi, ada juga masalah fokus. Saat mengarahkan kursor ke tautan a disematkan, hanya bagian tautan yang disorot, bukan seluruh tombol.

@mariusk Anda harus dapat melakukan ini sekarang:

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

Itu terlihat dan berfungsi sempurna, terima kasih, kerja bagus!

Ketika saya beralih ke ini, saya mendapatkan peringatan kebocoran memori EventEmitter. Saya tidak yakin apakah penangan klik pada <Link> atau pada <EnhancedButton> yang tidak dihapus dengan benar? Mungkin <Link> tidak di-unmount dengan benar?

Sepertinya sekarang berfungsi bahkan tanpa linkButton={true} , bukan? Ketika tombol memiliki Link untuk containerElement itu diubah menjadi elemen <a> daripada <button> ?

@hai-cea bagus, thx!
@antoinerousseau ya, <a> , pecahkan satu gaya... teks yang semula diatur ke text-align: center diubah menjadi kiri..karena sekarang menjadi elemen <a>

containerElement tidak didokumentasikan :(

Saya melihat bahwa pengaturan ini (misalnya RaisedButton width containerElement={<Link to="/register>} memiliki masalah CSS. Efek riak tidak diaktifkan dengan benar, Sebenarnya ini diaktifkan tetapi dengan penundaan yang sangat lama sehingga saya hampir tidak dapat melihatnya (sampai saya tekan lagi tombol tersebut). Saya menggunakan v0.15.4.

Ada petunjuk bagaimana mempercepatnya?

Tidak berfungsi lagi

Peringatan: Prop linkButton tidak diketahui pada tag.

@wzup hapus saja linkButton={true}

@wzup Jika Anda menulis kode Anda seperti ini tanpa prop linkButton, itu akan berfungsi.

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

@hai-cea ,
Halo,

bagaimana saya bisa membuat fungsi pada halaman login [katakan fungsi modal] ke popup, dalam kode di atas setelah menavigasi setelah klik tombol

Maafkan benjolan tetapi yang berikut ini masih menghasilkan peringatan pada 0,17:

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

Menghasilkan berikut ini:

Peringatan: Penyangga onTouchTap tidak diketahui pada tag. Untuk detailnya, lihat https://fb.me/react-unknown-prop

Saya memiliki masalah yang sama, jadi saya membuat komponen yang dapat digunakan kembali yang berfungsi untuk saya.

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

Penggunaan:

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

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

@MatthewEdge #4670 harus menyelesaikan masalah

Di Material UI v1.0.0-alpha20 , ini sepertinya tidak berfungsi untuk saya:
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

Hai,

masalah yang sama, menggunakan v1.0.0-alpha21 untuk membuat prototipe dan mendapat pesan containerElement tidak diketahui. Jadi properti tampaknya turun dan saya berakhir dengan solusi ini:

<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 dengan versi terbaru v1.0.0-beta.3 Anda harus dapat melakukan:

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

Dan kemudian gunakan pembungkus sebagai komponen

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

Terima kasih atas penunjuknya @HiroAgustin; ini tampaknya berfungsi di v1.0.0-beta.3 :

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

Dalam 1.0.0-beta.6 menggunakan solusi @HiroAgustin dan @hubgit saya mendapat peringatan:

Peringatan: Material-UI: berikan kelas ke properti komponen.
Logika fokus keyboard memerlukan referensi agar berfungsi dengan benar.

Ada saran?

@mht bagi saya itu berhasil ketika saya menghapus kurung kurawal:

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

@limakayo Tapi apa yang Anda lakukan ketika Anda ingin membuat tautan secara dinamis?

@mht pertanyaan bagus, saya menguji dengan kurung kurawal sekarang dan berhasil, saya tidak tahu mengapa

ada yang tahu cara menambahkandalam judul AppBar ?, saya harus dapat menambahkan tautan pada judul untuk 'Agen Perjalanan'

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

kita bisa menggunakan seperti ini dengan v1-beta

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

Saya pikir material-ui masih termasuk kerangka kerja ui gaya lama, di mana Anda tidak dapat menemukan semua gaya tombol yang Anda temukan, atau gaya sederhana terlalu banyak, jika seseorang perlu menyesuaikan dalam level rendah seperti saya, akhirnya saya senang dengan 'gaya-komponen' tidak perlu lebih banyak tentang css, saas, dll, hanya bereaksi komponen murni .. Anda kehilangan banyak waktu, hari, jam, mencoba mencari tahu bagaimana atau di mana mengubah sesuatu jika ada bug, atau menunggu rilis masa depan..

@palaniichukdmytro terima kasih atas solusinya, tetapi itu merusak gaya riak di BottomNavigationAction

Ini bekerja untuk saya pada tombol material-ui:
```
impor Bereaksi dari 'bereaksi'
impor Tombol dari '@material-ui/core/Button'
impor { Tautan } dari 'react-router-dom'

const SubmitButton = () =>
ketik = "kirim"
lebar penuh
varian="berisi"
warna = "utama"
komponen={Tautan}
ke="/bentuk"
>
Menyerahkan formulir

Mencoba merender tombol dengan Tautan dengan kode di bawah ini, tetapi tidak ada yang ditampilkan pada tampilan:

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

Bagaimana lagi saya bisa meneruskan alat peraga ke rute berikutnya menggunakan material-ui?

komponen={() => (
ke={{
nama jalur: 'halo-di sana',
negara: {
halo: 'HALO DI SANA!',
},
}}
/>
)}
ukuran = "kecil"
varian="berisi"
warna = "utama"
lebar penuh={benar}
>
TOMBOL HALO

Saya memiliki pertanyaan yang sama - pernahkah menyelesaikan ini?