ReactJs setState 更新与输入框中输入的内容不同步
Posted
技术标签:
【中文标题】ReactJs setState 更新与输入框中输入的内容不同步【英文标题】:ReactJs setState updating not in sync with what is being typed in the input box 【发布时间】:2015-07-22 17:38:58 【问题描述】:问题:
这很奇怪。我在子组件的输入框中键入,当我键入“onChange”方法时,应该将更新发送到父组件。我输入的第一件事未能更新,但随后我输入的任何其他内容都会更新,但与当前输入不同步。
我是 Reactjs 的菜鸟,也不是 javascript 的高手,所以我不知道发生了什么。
例子:
这是我的对象的控制台输出,用于更新状态和“setState”之后的新状态
第一次尝试更新value1
:
Object value1: "5"
Object value1: "0", value2: "0", value3: "0", opening: "0"
第二次尝试更新value1
:
Object value1: "55"
Object value1: "5", value2: "0", value3: "0", opening: "0"
正如您第一次看到的那样,没有任何更新。然后第二次部分更新了。
代码:
var Calculator =
React.createClass(
getInitialState:function()
return
inputValues:
value1: "0",
value2: "0",
value3: "0",
opening: "0"
,
outputValues:
buyRate: "0",
sellRate: "0",
buyStopLoss: "0",
buyTopProfit: "0",
sellStopLoss: "0",
sellTopProfit: "0"
,
//Not worrying about updating here yet. It' the child component below that is being funky.
update: function(update)
console.log("Calculator update was called");
this.setState(
update
);
,
render: function ()
return (
<div>
<div className="grid">
<div className="col fluid">
<h2>Input</h2>
<Input values=this.state.inputValues onClick=this.handleClick update=this.update value1=this.state.value1 value2=this.state.value2 value3=this.state.value3 opening=this.state.opening/>
</div>
<div className="col fluid">
<h2>Output</h2>
<Output />
</div>
</div>
</div>
);
);
var Input =
React.createClass(
getInitialState:function()
return
value1 : this.props.values.value1,
value2 : this.props.values.value2,
value3 : this.props.values.value3,
opening : this.props.values.opening
,
//Here is the update that is not updating the first time around.
update: function(key,value)
//console.log("Input Update was Called");
var newState = ;
newState[key]= value;
this.setState(newState);
//console.log(newState);
//console.log(this.state);
,
render:function()
return (
<div>
<p><InputComponent update=this.update name="value1" value=this.props.values.value1 /> / <InputComponent update=this.update name="value2" value=this.props.values.value2/> / <InputComponent update=this.update name="value3" value=this.props.values.value3/></p>
<p><InputComponent update=this.update name="value3" value= this.props.values.opening /></p>
</div>
)
);
var InputComponent =
React.createClass(
handleChange: function()
//console.log("handleChange was called");
var newValue = React.findDOMNode(this.refs.text).value.trim();
//console.log(this.props.name);
//console.log("newValue =");
//console.log(newValue);
this.props.update(this.props.name,newValue);
,
render: function()
return <input type="text" ref="text" placeholder="Enter Value" onChange=this.handleChange />;
);
【问题讨论】:
【参考方案1】:我发现了问题所在。您必须注意setState()
是一个异步调用。我的打印输出在函数返回之前被调用,这就是为什么输出似乎错过了一个字符。如果您想检查您的状态是否正在正确更新,请使用为方法 setState(function|object nextState[, function callback])
提供的回调。
例如:
update: function(key,value)
console.log("Input Update was Called");
var newState = ;
newState[key]= value;
console.log("New state and old state BEFORE update");
console.log(newState);
console.log(this.state);
this.setState(newState,this.printState);
,
printState: function()
console.log("New state AFTER update");
console.log(this.state);
,
【讨论】:
以上是关于ReactJs setState 更新与输入框中输入的内容不同步的主要内容,如果未能解决你的问题,请参考以下文章