Material-ui: Кнопка, обернутая ссылкой из реактивного маршрутизатора, не работает в Safari

@mariusk Расскажите, пожалуйста, как вы добавили компонент Link из response-router в компонент Button. Например, если я сделаю что-то вроде следующего, это не сработает.

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

Я замечаю, что если я добавляю linkButton={true} мне нужно добавить маршрут к элементу href , но реакция маршрутизатора Link генерирует тег привязки по умолчанию.

Вот фактический код:

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

Без обработчика onTouchTap он работает в Chrome, но не в Safari. С явным обработчиком (который снова вызывает transitionTo(...) response-router, он также работает в safari.

Это может быть связано с тем, что FlatButton генерирует элемент <button /> а я считаю, что <Link /> генерирует элемент <a /> . Итак, у вас будет:

<a><button /></a>

Одно из решений, которое я могу придумать, - это изменить расширенную кнопку, чтобы принять опору элемента, которая позволит пользователям настраивать элемент контейнера. Итак, вы сможете:

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

Ты прав; кнопка внутри элемента a недействительна 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> ?

@ hai-cea здорово, спасибо!
@antoinerousseau да, превратиться в <a> , сломал единственный стиль ... текст, изначально установленный в text-align: center , изменился на левый .. теперь это элемент <a>

containerElement не документирован :(

Я вижу, что эта настройка (например, RaisedButton width containerElement={<Link to="/register>} имеет проблему с CSS. Эффект пульсации не срабатывает должным образом, на самом деле он срабатывает, но с такой большой задержкой, что я почти не вижу его (пока я нажимай дольше такую ​​кнопку) .Я использую 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 is unknown. Таким образом, свойство кажется отброшенным, и я пришел к следующему решению:

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

Я думаю, что material-ui по-прежнему принадлежат фреймворкам пользовательского интерфейса старого стиля, где вы не можете найти все стили кнопок, которые вы найдете, или простые - это слишком много стилей, если кому-то нужно настраивать на низком уровне, как я, наконец, я доволен 'styled-components' больше не нужно о css, saas и т. д., просто реагируйте на чистые компоненты ... вы потеряли много времени, дней, часов, пытаясь выяснить, как или где что-то изменить, если есть ошибка, или подождите будущий выпуск ..

@palaniichukdmytro спасибо за решение, но он нарушает стиль ряби в BottomNavigationAction

Это сработало для меня с кнопкой Material-ui:
`` ''
импортировать React из 'React'
кнопка импорта из '@ material-ui / core / Button'
импортировать {Link} из 'response-router-dom'

const SubmitButton = () =>
type = "submit"
полная ширина
вариант = "содержится"
цвет = "основной"
component = {Link}
to = "/ форма"
>
Представить форму

Пытался отобразить кнопку с помощью Link с помощью приведенного ниже кода, но в представлении ничего не отображается:

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

Как еще я могу передать реквизит на следующий маршрут с помощью material-ui?

компонент = {() => (
to = {{
путь: 'hello-there',
штат: {
привет: 'ПРИВЕТ ЗДЕСЬ!',
},
}}
/>
)}
size = "small"
вариант = "содержится"
цвет = "основной"
fullWidth = {истина}
>
ПРИВЕТ КНОПКА

У меня такой же вопрос - когда-нибудь решить эту проблему?