[Textfield]If one binds onChange event, will re-render all Textfield?

[Yaxian]

Problem description

I import multiple <Textfield /> into a parent compoent, and I try bind one of them with onChane event.
When I change the input, it seems that all of shouldComponentUpdate will return true.

Steps to reproduce

Here is the code:

<div>
         <TextField
          style={{width: '100%', display: 'block'}}
          floatingLabelText="foo"
          value={this.state ? this.state.value : 1}
          ref='foo'
          onChange={(e) => {
            e.stopPropagation();
            this.setState({value: e.target.value})
          }}
        />
        <TextField
          style={{width: '100%', display: 'block'}}
          floatingLabelText='bar'
          ref='bar'
          onBlur={() => 1}

        />
        <TextField
          style={{width: '100%', display: 'block'}}
          floatingLabelText='baz'
          ref='baz'
          onBlur={() => 2}
        />
</div>

and I change the input of foo, the log of shouldComponentUpdate:

foo true (when focus foo)
********************
=====when change the input====
foo true
********************
bar true
********************
baz true
********************
foo true (when blur foo)
********************

I think it will slow the app :(

Versions

• Material-UI: 0.15.0
• React: 15.0.1
• Browser: chrome

[Yaxian]

Here is the shallowEqual code snippet:

  var bHasOwnProperty = hasOwnProperty.bind(objB);
  for (var i = 0; i < keysA.length; i++) {
    if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
      return false;
    }
  }

I think, there is some thing wrong with the assertion on objA[keysA[i]] !== objB[keysA[i]], cause I pass style={{width: '100%'}} in props. but it not equal, so shouldComponentUpdate returns true

[laispace]

Why close this issue? @Yaxian

[Yaxian]

@laispace Cause I wrap this component by:

import React, {Component} from 'react'
import {TextField} from 'material-ui'
export default class NewTextField extends Component {
  shouldComponentUpdate(nextProps) {
     return (true || false);
  }

  render() {
    return <TextField {...this.props} />
  }
}
================
import TextField from 'NewTextField';
<TextField {someProps} />