Javascript 将React-LinkedStateMixin用于文本输入不会';不要按预期重新渲染
下面是我的一个react组件的渲染函数: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
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);