Почему значение в event.target не равно event.target.value

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

Вы не устанавливаете event.target.value к весу в функции обработчика событий handleStatWeightChange

Попробуйте изменить ниже, это будет работать

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