首页 文章

使用React LinkedStateMixin进行文本输入不会按预期重新呈现

提问于
浏览 次
0

这是我的一个反应组件的渲染函数：

render: function() {
    var valueLink = this.linkState.value;
    var handleBlur = function(e) {
        valueLink.requestChange(e.target.value);
    };
    return (
        <input
            type="text"
            defaultValue={valueLink}
            onBlur={handleBlur}
        />
    );
}

我正在使用骨干反应 . 在模型上设置属性后，此组件将调用其 render 函数 . 骨干模型设置正确，但输入字段不会呈现模型上设置的值 .

基本上，当 valueLink.value 更改后调用 render 函数时，输入字段不会反映此更改 .

我尝试使用 value 而不是 defaultValue ，但这使它成为一个受控制的组件 .

我也不想使用 valueLink ，因为它为每个按键设置状态，而我只为触发onBlur .

有任何想法吗？ （如果您需要更多信息，请告诉我 . ）

javascript forms backbone.js reactjs

1 回答

  • 0

    来自React docs

    LinkedStateMixin为您的React组件添加一个名为linkState（）的方法 . linkState（）返回一个ReactLink对象，该对象包含React状态的当前值和一个用于更改它的回调 .

    在您的示例中，而不是this.linkState.value，将状态变量传递给linkState . Ex this.linkState（'message'）

    var Component = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {message: 'Hello!'};
    },
    render: function () {
        var valueLink = this.linkState('message');
        var handleBlur = function(e) {
            valueLink.requestChange(e.target.value);
        };
        return (
        <div>
        <input
            type="text"
            defaultValue={valueLink.value}
            onBlur={handleBlur}
        />
        
    
        {this.state.message}
        </div>
    );
    }
});

React.render(<Component />, document.body);

    http://jsfiddle.net/kirana/ne3qamq7/12/

    回复于

相关问题