【发布时间】：2017-03-19 20:36:27
【问题描述】：
我在我的项目中包含了 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 未捕获的错误：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向组件的 render 方法中未创建的组件添加 ref，或者您加载了多个 React 副本（详细信息：https://facebook.github.io/react/warnings/refs-must-have-owner.html）。（...）
2) ReactTransitionGroup.js:176 Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined(...)
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-disable-line 从'material-ui/styles/baseThemes/lightBaseTheme'导入baseTheme； 从 'material-ui/styles/getMuiTheme' 导入 getMuiTheme；
2) 在课堂上 getChildContext() { 返回 { muiTheme: getMuiTheme(baseTheme) }; }
3) 和一个静态声明： EditorComponent.childContextTypes = { muiTheme：React.PropTypes.object.isRequired， };
感觉就像我正在做所有需要的事情。
这可能与我的经历有关：
https://github.com/callemall/material-ui/issues/2818
所以问题可能是由 material-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);
}
}
【问题讨论】：
-
我现在用 FlatButton 进行了测试，它并没有完全变黑（或者在第二次点击时变暗），但除此之外，同样的问题。
-
您是否包含了样式？
-
是的，如果您指的是 style 属性中引用的对象，那是一个有效的引用。
标签： reactjs material-ui