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>

    }
});

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

1 个答案: