Question

我在项目中添加了material-ui（和react-tap-event-plugin），并为我的一个组件添加了3个按钮：

<RaisedButton onClick={this.props.onSave} label="Save" style={styles.button}/>
<RaisedButton label='Publish' onClick={this.props.onPublish} style={styles.button}/>
<RaisedButton label='Cancel' onClick={this.onCancel.bind(this)} style={styles.buttonCancel}/>

当我点击其中任何一个时，它们会变成深灰色，当我再次点击时，它们会变黑（并保持不变）。整个应用程序变得疯狂，反应路由不再有效（我可以看到地址栏中的URL更改，但视图不刷新）。对于按钮点击，这一切看起来都很糟糕：）

知道我可能做错了什么吗？（我按照文档中的描述处理childContext，因此加载了muiTheme）。

我忘了检查控制台......按下按钮时有3个例外：

1） vendor.js：12 Uncaught Error：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向组件的render方法中未创建的组件添加引用，或者您已加载多个React副本（详细信息：https://facebook.github.io/react/warnings/refs-must-have-owner.html）。（...）

2） ReactTransitionGroup.js：176 Uncaught TypeError：无法读取未定义的属性'componentWillLeave'（...）

3） vendor.js：12未捕获错误：removeComponentAsRefFrom（...）：只有ReactOwner可以有refs。您可能正在删除未在组件的render方法中创建的组件的引用，或者您已加载多个React副本（详细信息：https://facebook.github.io/react/warnings/refs-must-have-owner.html）。（...）

在使用FlatButton的组件中（或者RaisedButton都不起作用）我有这个：

1）导入：从'material-ui / FlatButton'导入FlatButton; // eslint-禁用线从'material-ui / styles / baseThemes / lightBaseTheme'导入baseTheme; 从'material-ui / styles / getMuiTheme'导入getMuiTheme;

2）在课堂上 getChildContext（）{ return {muiTheme：getMuiTheme（baseTheme）}; }

3）和静态声明： EditorComponent.childContextTypes = { muiTheme：React.PropTypes.object.isRequired， };

感觉我正在做所有必要的事情。

这可能与我所遇到的有关：

https://github.com/callemall/material-ui/issues/2818

所以问题可能是由于材料ui分发它自己的React版本引起的？有什么意义呢？但是......我的material-ui版本没有node_modules文件夹，所以没有额外的React ......

导入和使用FlatButton的组件的来源

import React from 'react'; // eslint-disable-line
import Input from '../../../components/common/textInput';  // eslint-disable-line
import BaseEditorComponent from '../base/EditorComponent';
import FlatButton from 'material-ui/FlatButton';  //eslint-disable-line
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';


export default class EditorComponent extends BaseEditorComponent {
    constructor() {
        super();
        this.state = {
            textValue: 'Enter value'
        };
    }
    getChildContext() {
        return { muiTheme: getMuiTheme(baseTheme) };
    }

    _onChange(e) {
        this.setState({
            textValue: e.target.value
        });
    }

    render() {
        return (
            <div>
                <Input
                    value={this.state.textValue}
                    name="SimpleText"
                    label="Simple Text Value:"
                    onChange={this._onChange.bind(this)}
                    />
                <FlatButton label="Test"/>
            </div>
        );
    }
}


EditorComponent.childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
};

另外，BaseEditorComponent：

import React from 'react';
import widgetActions from '../../widgets/WidgetActions';
import widgetInstanceStore from '../../widgets/WidgetInstanceStore';

export default class EditorComponent extends React.Component {
    constructor() {
        super();
    }
    componentDidMount() {
        this.setState(widgetInstanceStore.getWidgetInstanceState(this.props.widgetId) || {});
    }
    save() {
        widgetActions.saveWidgetInstanceState(this.props.widgetId, this.state);
    }
}

Answer 1

您是否尝试过使用onTouchTap而不是onClick？
如果＃1没有帮助，请显示更多代码 - 包含上述代码的组件及其父组件。

Answer 2

根据https://github.com/callemall/material-ui/issues/2818，解决方案是在browserify捆绑包中包含react-addons-transition-group和react。所以很高兴知道不仅NPM可以通过反应的第二副本，而且浏览器或webpack。

感谢https://stackoverflow.com/users/3706986/piotr-sołtysiak今天帮助解决这个问题！

RaisedButton根本不工作

2 个答案: