Question

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

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函数。骨干模型设置正确，但输入字段不会呈现模型上设置的值。

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

我尝试使用value代替defaultValue，但这使其成为受控组件。

我也不想使用valueLink，因为它为每次按键设置状态，而我只为触发onBlur的内容。

有什么想法吗？（如果您需要更多信息，请与我们联系。）

Answer 1

来自React docs

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

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

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}
        />
        <br />
        {this.state.message}
        </div>
    );
    }
});

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

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

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

1 个答案: