最简单的高阶组件和 material-ui

Question

当我直接从我的组件使用 TextField 时，它工作得很好（案例 1），但是当我将它包装在 props 的函数（案例 2）中时，它在每次更改后失去焦点。

import TextField from 'material-ui/TextField';

var Comp = React.createClass({
    getInitialState: function () {
        return {description: ""};
    },
    descriptionChanged: function (e) {
        this.setState({description: e.target.value});
    },
    render: function () {
        var self = this;
        var T2 = function (props) {
            return <TextField hintText="Desc2"
                              value={self.state.description}
                              onChange={self.descriptionChanged}/>;
        };
        return <div>
            1 <TextField hintText="Desc1"
                       value={self.state.description}
                       onChange={self.descriptionChanged}
            />
            2 <T2/>
        </div>

    }
});

jsfiddle

为什么会这样，我该如何解决？

Answer 1

这是因为您在每次渲染时都创建了一个 new 函数（因此是一个新的高阶组件）。 React 会认为这是一个完全不同类型的组件，并且会销毁旧的 DOM 以创建新的

在此版本中，我们会在创建组件实例时创建一次高阶组件。

import TextField from 'material-ui/TextField';

var Comp = React.createClass({
    getInitialState: function () {
        return {description: ""};
    },
    componentWillMount() {
        // create HOC once for this instance
        var self = this;
        this.T2 = function (props) {
            return <TextField hintText="Desc2"
                              value={self.state.description}
                              onChange={self.descriptionChanged}/>;
        };
    },
    descriptionChanged: function (e) {
        this.setState({description: e.target.value});
    },
    render: function () {
        var self = this;
        var T2 = this.T2;
        return <div>
            1 <TextField hintText="Desc1"
                       value={self.state.description}
                       onChange={self.descriptionChanged}
            />
            2 <T2/>
        </div>

    }
});

最简单的高阶组件和 material-ui

Simplest high order components and material-ui

javascript

reactjs

material-ui