Не удается получить event.target.value в React

Question

Я пытаюсь получить реакцию от функции onInputChange, когда я использую ее с onChange на входе, но я не понял, почему это значение не console.log. Любая помощь?

Приложение. js

import React, { Component } from 'react';
import Output from './Components/Output';
import NumberInput from './Components/NumberInput';
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      decimal: 0,
      inputString: ''
    }
  }

  onInputChange = (event) => {
    console.log(event.target.value)
  }

  render() {
    const { decimal, inputString } = this.state;
    return (
      <fragment>
      <h1>Binary to Decimal convertor</h1>
      <NumberInput InputChange={this.onInputChange} />
      <button>Submit</button>
      <Output string={inputString}/>
      </fragment>
      );
  }
}

export default App;

Компонент NumberInput:

import React from 'react';

const NumberInput = ({ inputChange }) => {
    return (
            <fragment>
            <input type='search' onChange={inputChange}></input>
            </fragment>
        )
}

export default NumberInput;

Answer 1

Нужны некоторые изменения

Измените InputChange={this.onInputChange} на inputChange={this.onInputChange} в приложении компонент.

, так как вы получаете доступ к inputChange в вашем NumberInput компоненте.

А также измените свой тег фрагмента, поскольку вы использовали фрагмент вместо Фрагмент тег.

Либо используйте <Fragment>, <React.Fragment> или <> в NumberInput , Приложение Компонент как-

<Fragment>
  <input type='search' onChange={inputChange}></input>
</Fragment>

Answer 2

InputChange должен быть верблюжьим

изменить

<NumberInput InputChange={this.onInputChange} />

на

<NumberInput inputChange={this.onInputChange} />

вам также может понадобиться bind

<NumberInput inputChange={(e) => this.onInputChange(e)} />