CODEWITHSUNDEEP
reactjsmaterial-ui
Johnny
Johnny

Reputation: 1915

RaisedButton not working at all

I have included material-ui (and react-tap-event-plugin) in my project and added 3 buttons to one of my components:

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

when I click on any of these, they go very dark grey and when I click again, they go black (and stay like that). The whole applications goes bonkers, the react routing no longer works (I can see the URL changing in the address bar, but the view doesn't refresh). This all looks pretty bad for a button click :)

Any idea what I may be doing wrong? (I take care of the childContext as described in the docs, so the muiTheme is loaded).

I forgot to check the console... there are 3 exceptions whenever I press the button:

1) vendor.js:12 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: 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 Uncaught Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).(…)

In the component that uses FlatButton (or RaisedButton neither work) I have this:

1) Import: import FlatButton from 'material-ui/FlatButton'; //eslint-disable-line import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; import getMuiTheme from 'material-ui/styles/getMuiTheme';

2) in the class getChildContext() { return { muiTheme: getMuiTheme(baseTheme) }; }

3) and a static declaration: EditorComponent.childContextTypes = { muiTheme: React.PropTypes.object.isRequired, };

Feels like I'm doing all that's required.

This may be related to what I'm experiencing:

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

So probably the issue is caused by material-ui distributing it's own version of React? What's the point in that? But... my version of material-ui doesn't have a node_modules folder, so no extra React either...

Source for a component importing and using 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,
};

Also, the 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);
    }
}

Upvotes: 1

Views: 622

Answers (2)

Johnny
Johnny

Reputation: 1915

As per https://github.com/callemall/material-ui/issues/2818 the solution was to include react-addons-transition-group alongside react in the browserify bundle. So it's good to know that it's not only NPM where a 2nd copy of react can slip through, but also browserify or webpack.

Thanks https://stackoverflow.com/users/3706986/piotr-sołtysiak for helping with the issue today!

Upvotes: 0

Piotr Sołtysiak
Piotr Sołtysiak

Reputation: 1006

  1. Have you tried to use onTouchTap instead of onClick?
  2. If #1 doesn't help, please show more code - component with above code and it's parent component.

Upvotes: 0

Related Questions