Javascript 为什么event.target中的值不等于event.target.value
我正在学习react,并注意到当更改number类型的输入并输出Javascript 为什么event.target中的值不等于event.target.value,javascript,reactjs,events,dom-events,Javascript,Reactjs,Events,Dom Events,我正在学习react,并注意到当更改number类型的输入并输出event.target时,我看到的值与输出event.target.value时看到的值不同。 我想知道为什么会这样 一些示例代码显示了我所说的内容: class Child extends React.Component { render() { return ( <input type="number" value={this.props.weight}
event.target
时,我看到的值与输出event.target.value
时看到的值不同。
我想知道为什么会这样
一些示例代码显示了我所说的内容:
class Child extends React.Component {
render() {
return (
<input type="number"
value={this.props.weight}
onChange={(event) => this.props.onWeightChange(event, this.props.index)}
step="0.1" />
);
}
}
class Parent extends React.Component {
state = {
text: 'Goals',
weight: 1
}
handleStatWeightChange = (event, index) => {
console.log(event.target)
console.log(event.target.value)
}
render() {
return (
<div>
<Child weight={this.state.weight} onWeightChange={this.handleStatWeightChange}/>
</div>
);
}
}
React.render(<Parent />, document.getElementById('app'));
类子级扩展React.Component{
render(){
返回(
this.props.onWeightChange(事件,this.props.index)}
步骤=“0.1”/>
);
}
}
类父类扩展了React.Component{
状态={
文本:“目标”,
体重:1
}
handleStatWeightChange=(事件、索引)=>{
console.log(event.target)
console.log(event.target.value)
}
render(){
返回(
);
}
}
React.render(,document.getElementById('app'));
更改输入值(从1.1更改为1)时,我在控制台中看到以下输出:
"<input type='number' value='1' step='0.1' data-reactid='.0.0'>"
"1.1"
“”
"1.1"
为什么
event.target
中的值仍然是1?您没有在handleStatWeightChange事件处理程序函数中将event.target.value设置为weight
试试下面的变化,它会工作
handleStatWeightChange = (event, index) => {
this.setState({
weight: event.target.value
})
console.log(event.target)
console.log(event.target.value)
}
我应该补充一下,我意识到handleStatWeightChange目前实际上并没有处理更改。因为您在input Element中将值硬编码为1,那么为什么event.target.value会更新?event.target.value是否应该提取我在第一个输出行中看到的值属性?另外,如果我编辑处理程序以实际将状态更新为新值,event.target永远不会更改(将始终显示value='1'),而event.target.value将输出实际的当前值。您是否也可以共享子组件代码所有代码都是共享的。类Child是子组件。我意识到我实际上并没有处理更改。这实际上并没有回答我的问题。(但它确实有助于进一步说明)如果使用上面的代码输入4,我将看到console.log(event.target)的“”。对于console.log(event.target.value)和“4”,我不明白为什么event.target中当event.target.value=4时仍然显示value=1。这不是一个真正的拦截器或任何东西对我来说只是一些我试图理解的东西。明白了。无论在字段中输入什么,event.target都只呈现具有初始值的输入元素。例如,如果您将权重初始化为10,则event.target将显示值为10