Блог

Главная - Вопросы по программированию - Как я могу добавить новый элемент в свой список в REACT.JS?

Как я могу добавить новый элемент в свой список в REACT.JS?

#reactjs

Вопрос:

это мое приложение react, и я не получаю никаких ошибок при компиляции, однако мой новый элемент не добавляется в мой список, также значения моего массива отображаются в одной строке, а не в разных строках, не могли бы вы мне помочь, ребята ?

Я действительно не знаю, в чем проблема, я просто хочу добавить содержимое текстовой области в список.

 import React, { useState } from 'react';
const App = () => {
  const [NewTaskText, setNewTaskText] = useState('');
  const [Tasks, setTasks] = useState(['do a task', 'samira']);

  const addTask = () => {
    if (!NewTaskText) return;
    setTasks((currentTasks) => {
      return [...currentTasks, NewTaskText];
    });
    setNewTaskText('');
  };
  const onchangeInput = (e) => {
    const value = e.target.value;
    setNewTaskText(value);
  };

  return (
    <div className="row">
      <form>
        <div className="row col s6">
          <div className="input-field col s10">
            <textarea
              id="textarea1"
              className="materialize-textarea"
              value={NewTaskText}
              onChange={onchangeInput}
            ></textarea>

            <label htmlFor="textarea1">What needs to be done ?</label>
          </div>
        </div>
      </form>

      <div className="row col s6">
        <br></br>
        <a className="waves-effect waves-light btn" href="/#">
          <i className="material-icons left" onClick={addTask}>
            add_circle
          </i>
          Add
        </a>
      </div>

      <div className="row">
        <div className="row col s9">
          <ul className="collection with-header">
            <li className="collection-header">
              <h4>Todo List</h4>

              <form>
                <div className="input-field">
                  <input id="search" type="search" required />
                  <label className="label-icon" htmlFor="search">
                    <i className="material-icons">search</i>Search
                  </label>
                  <i className="material-icons">close</i>
                </div>
              </form>
            </li>
            <label>
              <li className="collection-item">
                <input type="checkbox" />
                <span>{Tasks.map((item) => item)}</span>

                <span>
                  <a href="#!" className="secondary-content">
                    <i className="material-icons">delete</i>
                    <i className="material-icons">check_circle</i>
                  </a>
                </span>
              </li>
            </label>
          </ul>
        </div>
      </div>
    </div>
  );
};
export default App;

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

1. ‘setNewTaskText(«»);’ эта строка вызывает проблему

2. я создал кодовый ящик — codesandbox.io/s/competent-noether-xicn5?file=/src/App.js

Ответ №1:

Добро пожаловать в SO. Я изменил ваш код как bewlow, и вы также можете найти его по этой ссылке, чтобы выполнить задачу :

 import React, { useState } from 'react';
const App = () => {
  const [NewTaskText, setNewTaskText] = useState('');
  const [Tasks, setTasks] = useState(['do a task', 'samira']);

  const addTask = (e) => {
    e.preventDefault()
    if (!NewTaskText) return;
    setTasks((currentTasks) => {
      return [...currentTasks, NewTaskText];
    });
    setNewTaskText('');
  };
  const onchangeInput = (e) => {
    const value = e.target.value;
    setNewTaskText(value);
  };

  return (
    <div className="row">
      <form>
        <div className="row col s6">
          <div className="input-field col s10">
            <textarea
              id="textarea1"
              className="materialize-textarea"
              value={NewTaskText}
              onChange={onchangeInput}
            ></textarea>

            <label htmlFor="textarea1">What needs to be done ?</label>
          </div>
        </div>
      </form>

      <div className="row col s6">
        <br></br>
        <a className="waves-effect waves-light btn" href="/#">
          <i className="material-icons left" onClick={(e) => addTask(e)}>
            add_circle
          </i>
          Add
        </a>
      </div>

      <div className="row">
        <div className="row col s9">
          <ul className="collection with-header">
            <li className="collection-header">
              <h4>Todo List</h4>

              <form>
                <div className="input-field">
                  <input id="search" type="search" required />
                  <label className="label-icon" htmlFor="search">
                    <i className="material-icons">search</i>Search
                  </label>
                  <i className="material-icons">close</i>
                </div>
              </form>
            </li>
            <label>
              {Tasks.map((item, i) => {
                return (
                  <li className="collection-item" key = {i}>
                    <input type="checkbox" />
                    <span>{item}</span>

                    <span>
                    <a href="#!" className="secondary-content">
                    <i className="material-icons">delete</i>
                    <i className="material-icons">check_circle</i>
                  </a>
                </span>
              </li>
                )
              })}
            </label>
          </ul>
        </div>
      </div>
    </div>
  );
};
export default App;

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

1. я удалил эту часть setNewTaskText(«); из своего кода, но она пока не работает, что мне делать ?

2. спасибо за ваш ответ, однако он не работает, и я тоже повторяю эту ошибку : поставщики~main.chunk.js:29995 Предупреждение: У каждого ребенка в списке должна быть уникальная «ключевая» опора. Проверьте метод рендеринга App . Видишь reactjs.org/link/warning-keys для получения дополнительной информации. в div в приложении ( локальный хост:3002/статический/js/main.chunk.js:28:95 )

3. Да, я изменил свой ответ, вы можете проверить его.

4. дорогая саба, сейчас я не получаю никаких ошибок, но мой новый товар не добавляется в мой список todolist, без каких-либо ошибок, я удивлен, почему ? кроме того, я просто могу щелкнуть флажок первого значения массива , которое является «выполнить задачу» , я не могу установить флажок другие

5. Я добавил ссылку, чтобы показать, как выполняется код. Он отлично работает и добавляет новые задачи в список.

Ответ №2:

вам нужно добавить кнопку внутри формы , чтобы отправить форму, добавить e.preventDefault() , чтобы не обновлять страницу при добавлении задачи .

 import React, { useState } from 'react'
const App = () => {
  const [NewTaskText, setNewTaskText] = useState('')
  const [Tasks, setTasks] = useState(['do a task', 'samira'])

  const addTask = (e) => {
    e.preventDefault()
    if (!NewTaskText) return
    setTasks((currentTasks) => {
      return [...currentTasks, NewTaskText]
    })
    setNewTaskText('')
  }
  const onchangeInput = (e) => {
    const value = e.target.value
    setNewTaskText(value)
  }

  return (
    <div className='row'>
      <form>
        <div className='row col s6'>
          <div className='input-field col s10'>
            <textarea
              id='textarea1'
              className='materialize-textarea'
              value={NewTaskText}
              onChange={onchangeInput}
            ></textarea>

            <label htmlFor='textarea1'>What needs to be done ?</label>
          </div>
        </div>
        <div className='row col s6'>
          <br></br>
          <button className='waves-effect waves-light btn' type="submit">
            <i className='material-icons left' onClick={addTask}>
              add_circle
            </i>
            Add
          </button>
        </div>
      </form>

      <div className='row'>
        <div className='row col s9'>
          <ul className='collection with-header'>
            <li className='collection-header'>
              <h4>Todo List</h4>

              <form>
                <div className='input-field'>
                  <input id='search' type='search' required />
                  <label className='label-icon' htmlFor='search'>
                    <i className='material-icons'>search</i>Search
                  </label>
                  <i className='material-icons'>close</i>
                </div>
              </form>
            </li>
            <label>
              <li className='collection-item'>
                <input type='checkbox' />
                <span>{Tasks.map((item) => item)}</span>

                <span>
                  <a href='#!' className='secondary-content'>
                    <i className='material-icons'>delete</i>
                    <i className='material-icons'>check_circle</i>
                  </a>
                </span>
              </li>
            </label>
          </ul>
        </div>
      </div>
    </div>
  )
}
export default App

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

1. привет, ребята, я могу правильно добавить newitem в свой список задач,но я просто могу установить флажок первого значения моего массива в моем списке, не могли бы вы мне помочь ? как я могу установить флажок для каждой строки в моем списке ? вот мои коды : codesandbox.io/s/green-voice-fu5gx?file=/src/App.js

2. вы хотите проверить, проверено это или нет

3. послушайте ,я изменил ваш код. codesandbox.io/s/black-microservice-0ml7e

4. уважаемый Mhammed, к сожалению , это не работает: (, на самом деле это работает в песочнице, но в моей реальной программе этого нет, и я не получаю никаких ошибок

5. могу я посмотреть программу

Метки: