Блог

Главная - Вопросы по программированию - Как мне автоматически создать новый элемент при отправке ввода в ReactJS

Как мне автоматически создать новый элемент при отправке ввода в ReactJS

#reactjs

#reactjs

Вопрос:

В настоящее время я работаю над своим первым проектом react js в виде списка задач. Он имеет значение ввода текста, значение которого передается в функцию при отправке для обновления элемента списка. Мой вопрос заключается в следующем, я хочу сделать так, чтобы при отправке он создавал новый

  • элемент, который содержит значение состояния. Я впервые попытался использовать объект, когда он выдал мне сообщение об ошибке, что объекты нельзя использовать для дочернего элемента. Который я выбрал, изменив состояние на массив, но он по-прежнему не создает новый элемент, как я предполагал. Вот мой код 

     import React, { Component } from "react";
import ReactDOM from "react-dom";

class Tests extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      object: [],
    };
    this.updateInputValue = this.updateInputValue.bind(this);
    this.submit = this.submit.bind(this);
  }

  updateInputValue(evt) {
    this.setState({
      value: evt.target.value,
    });
  }

  submit() {
    this.setState({
      object: this.state.value,
      value: "",
    });
  }

  render() {
    return (
      <div>
        <label for="text">Text 1</label>
        <input
          type="text"
          label="text"
          onChange={(evt) => this.updateInputValue(evt)}
          onSubmit={this.submit}
          value={this.state.value}
        />
        <br />
        <button onClick={this.submit} style={{ height: 50, width: 60 }}>
          Submit
        </button>
        <ul>
          <li>{this.state.object}</li>
        </ul>
      </div>
    );
  }
}

export default Tests;

ReactDOM.render(<Tests />, document.getElementById("root"));

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

    • Ответ №1:

    Вы, по сути, перезаписываете значение object на своем setState . Что вам нужно сделать, это сохранить старый массив и добавить последний элемент. Используя синтаксис распространения:

     submit() {
  this.setState({
    object : [...this.state.object, this.state.value],
    value  : "",
  });
}

    Это создает новый массив с добавлением вашего нового элемента. Будьте осторожны, чтобы не изменить состояние (другими словами, изменить this.state ):

     // the above code is essentially doing this:
const newObject = [...this.state.object, this.state.value];
this.setState({ object: newObject });

// 👻 buggy version! This is mutating the state:
this.state.object.push(this.state.value);

    При рендеринге вам необходимо отобразить несколько map объектов:

     <ul>
   { this.state.object.map(item => <li>{ item }</li>) }
</ul>

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

    1. Спасибо, мой друг, я думаю, что это может быть частью проблемы, однако теперь при отправке добавляется только один элемент <li> вместо создания совершенно нового

    2. Я только что отредактировал свой ответ. Это связано с тем, что вы визуализируете сам массив, вам нужно сделать, это отобразить карту каждого элемента object массива.