Javascript 将React-LinkedStateMixin用于文本输入不会';不要按预期重新渲染

Javascript 将React-LinkedStateMixin用于文本输入不会';不要按预期重新渲染,javascript,forms,backbone.js,reactjs,Javascript,Forms,Backbone.js,Reactjs,下面是我的一个react组件的渲染函数: render: function() { var valueLink = this.linkState.value; var handleBlur = function(e) { valueLink.requestChange(e.target.value); }; return ( <input type="text" defaultV

下面是我的一个react组件的渲染函数:

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:function(){
var valueLink=this.linkState.value;
var handleBlur=功能(e){
valueLink.requestChange(如目标值);
};
返回(
);
}
我用的是主干线。在模型上设置属性后,此组件将调用其
render
函数。主干模型设置正确,但输入字段不会呈现在模型上设置的值

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

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

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

有什么想法吗?(如果您需要更多信息,请告诉我。)

来自React docs

LinkedStateMixin向React组件添加一个名为 链接状态()。linkState()返回一个ReactLink对象,该对象包含 React状态的当前值以及更改它的回调

在您的示例中,将状态变量传递给linkState,而不是this.linkState.value。例如this.linkState('消息')

var Component=React.createClass({
mixin:[React.addons.LinkedStateMixin],
getInitialState:函数(){
返回{message:'Hello!'};
},
渲染:函数(){
var valueLink=this.linkState('message');
var handleBlur=功能(e){
valueLink.requestChange(如目标值);
};
返回(

{this.state.message} ); } }); React.render(,document.body);

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);