最简单的高阶组件和材料-ui

Question

当我直接从我的组件中使用 TextField 时，它工作得非常好（案例 1），但是当我从道具将它包装在函数中（案例 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>

    }
});