Question

我想知道如何在按下键盘上的Enter时将其保存在哪里，它将输入中的内容记录到控制台上。请帮忙。谢谢！

    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>
        );
    }
}

如何将输入中的数据记录到React中的控制台上

1 个答案: