Как записать данные с ввода на консоль в React

Question

Я хотел бы знать, как это сделать, когда, когда я нажимаю клавишу ввода на моей клавиатуре, он записывает все, что находится на входе, на консоль.Пожалуйста помоги.Спасибо!

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

    class App extends Component {
      onClick() {
        alert("CLICKED");
      }

      onChange(eve) {
        console.log(eve.target.value);
      }

      onSubmit() {
        alert("SUBMITTED");
      }

      render() {
          const list = ["Lebron", "Kobe", "Steph", "Kevin"];
        return (
          <div className="App">
           <h1>{
             list.map(listitem =>{
               return (
               <div onClick={this.onClick}>
                {listitem}
              </div>
             )})
           }</h1>
           <form onSubmit={this.onSubmit}>
             <input onChange={this.onChange} />
           </form>
          </div>
        );
      }}

export default App;

Пожалуйста, помогите!

Answer 1

Сохраните введенное значение в state переменную onChange, а затем зарегистрируйте его на консоли onSubmit.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }
    onChange = event => {
        this.setState({ value: event.target.value});
    }
    onSubmit = event => {
        const { value } = this.state;
        event.preventDefault();
        console.log(value);
    }
    render() {
        const list = ["Lebron", "Kobe", "Steph", "Kevin"];
        const { value } = this.state;
        return (
            <div className="App">
                ...
                <form onSubmit={this.onSubmit}>
                    <input onChange={this.onChange} value={value}/>
                </form>
            </div>
        );
    }
}