Question

我正在学习反应，并且在更改类型编号的输入并输出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'));

更改输入值（从1的1.1更改）时，我会在控制台中看到以下输出：

"<input type='number' value='1' step='0.1' data-reactid='.0.0'>"
"1.1"

为什么event.target中的值仍为1？

Answer 1

您没有在handleStatWeightChange事件处理函数中将event.target.value设置为权重

尝试以下更改即可工作

handleStatWeightChange = (event, index) => {
    this.setState({
      weight: event.target.value
    })
    console.log(event.target)  
    console.log(event.target.value)
  }

为什么event.target中的值不等于event.target.value

1 个答案: