Блог

Главная - Вопросы по программированию - Как я могу просматривать данные после получения данных в API входа в консоль?

Как я могу просматривать данные после получения данных в API входа в консоль?

#reactjs #api

#reactjs #API

Вопрос:

Я начинаю изучать reactjs и хочу просмотреть данные в таблице после ввода текста в поля ввода и отображения данных в журнале консоли. Как я могу показать все данные, введенные на страницу?

onAdd(employee_name, employee_age, employee_salary){
console.log(employee_name, employee_age, employee_salary);}

Я ожидаю показать ввод данных в полях ввода на странице. Спасибо

Комментарии:

1. Не могли бы вы поделиться своим кодом, возможно, где находится эта функция, а также местоположением, в котором вы хотите отобразить эту информацию?

2. вот код: <form onSubmit={this.onSubmit}> <div className="container"> <input placeholder="Name"ref={nameInput => this.nameInput = nameInput} /> <input placeholder="Age" ref={ageInput => this.ageInput = ageInput} /> <input placeholder="Salary" ref={salaryInput => this.salaryInput = salaryInput} /> <button>Add</button> </div> </form> я пытаюсь создать функцию добавления, которая отображается на странице, но я могу получить данные в журнале консоли после ввода текста в поля ввода

3. Я пробую этот метод get, чтобы я мог извлекать данные, отображаемые в журнале консоли, но я не знаю, есть ли функция getEmployee. Кто-нибудь может мне помочь? Спасибо. onAdd(employee_name, employee_age, employee_salary){ const employees = this.getEmployees(); employees.push({ employee_name, employee_age, employee_salary }); this.setState({employees}); }

Ответ №1:

Это должно сработать:

 import React, { Component } from 'react';

class EmployeeInput extends Component {
  state = {
    employee_name: '',
    employee_age: '',
    employee_salary: '',
  };
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };
  render() {
    return (
      <form>
        <div>
          <label>
            employee_name
            <input name="employee_name" type="text" onChange={this.handleChange} />
          </label>
          Value: {this.state.employee_name}
        </div>
        <div>
          <label>
            employee_age
            <input name="employee_age" type="text" onChange={this.handleChange} />
          </label>
          Value: {this.state.employee_age}
        </div>
        <div>
          <label>
            employee_salary
            <input name="employee_salary" type="text" onChange={this.handleChange} />
            Value: {this.state.employee_salary}
          </label>
        </div>
      </form>
    );
  }
}

Вот работающий пример: https://stackblitz.com/edit/react-jl2skw?file=index.js

Комментарии:

1. как я могу опубликовать данные на странице, которую я ввожу в текстовое поле, а не показывать только в журнале консоли?

2. может ли текст, введенный в поле ввода, не удаляться при вводе текста и добавлять введенный текст на страницу? Спасибо

3. Извините. Я не понимаю вашего вопроса.

4. может ли текст, введенный в поле ввода, не удаляться после его ввода? Также он умножает базу данных на то, что вы вводите в поле ввода.