如何在React.JS中创建一个简单的列表制作器应用程序？ [英] How to create a simple list maker app in React.JS?

问题描述

我正在使用一个简单的列表制作器，使用create-react-app来制作列表应用程序，但我在摸索功能时遇到了一些麻烦。我想用此应用程序完成的操作：

I'm working on a simple list maker, to do list app using create-react-app and I'm having some trouble puzzling out the functionality. What I'm trying to accomplish with this app:

• 我希望能够在输入中输入文本，然后按按钮或按Enter键，任何文本都会列在应用程序主体上。

• I want to be able to enter text into an input, push the button or press enter, and whatever text will be listed on the body of the app.

我希望能够创建一个可以删除列表的按钮任务或目标完成后的项目

I want to be able to create a button that will delete the list items once the task or objective is complete

到目前为止，我的代码分为以下几个部分：

My code is broken up into these components so far:

App，
ListInput，
ItemList，
Item

App, ListInput, ItemList, Item

App的代码为

import React, { Component } from 'react';
import './App.css';
import Navigation from './components/Navigation';
import ListInput from './components/ListInput';
import ListName from './components/ListName';
import Item from './components/Item';
import ItemList from './components/ItemList';

class App extends Component {
  constructor() {
    super();
      this.state = {
        input: '',
        items: []
      };    
  }

  addItem = () => {
    this.setState(state => {
      let inputValue = this.input.current.value;
      if (inputValue !== '') {
          this.setState({
            items: [this.state.items, inputValue]
          })
      }
    })
  }


  onButtonEnter = () => {
    this.addItem();
  }

  render() {
    return (
      <div className="App">
       <Navigation />
       <ListName />
       <ListInput addItem={this.addItem}
        onButtonEnter={this.onButtonEnter} />
        <Item />
        <ItemList />
      </div>
    );
  }
}

export default App;

ListInput的代码是：

The code for ListInput is :

import React from 'react';
import './ListInput.css';

const ListInput = ({ addItem, onButtonEnter }) =>  {

        return (
            <div>
                <p className='center f2'>
                {'Enter List Item'}
                </p>
                <div className='center'>
                    <div className='center f3 br-6 shadow-5 pa3 '>

                            <input type='text'
                            className='f4 pa2 w-70 center' 
                            placeholder='Enter Here'

                             />                       
                            <button className='w-30 grow f4 link ph3 pv2 dib white bg-black'
                            onClick={onButtonEnter}
                            onSubmit={addItem} >
                                {'Enter'}
                            </button>

                    </div>
                </div>
            </div>
            );

}


export default ListInput;

项的代码为：

import React from 'react';

const Item = ({text}) =>{
    return (
        <div>
            <ul>{text}</ul>
        </div>
    )}
export default Item;

ItemList的代码为：

And the code for ItemList is :

import React from 'react';
import Item from './Item';

const ItemList = ({ items }) => {
    return (
        <div>
            {item.map(items => <Item key={item.id}
            text={item.text} />
            )}
        </div>
    )
}

export default ItemList;

在我的应用程序中，我返回的错误 item没有定义，我很困惑为什么。

In my react app I am returning an error of 'item' is not defined and I'm confused why.

推荐答案

在您的App.js中，您需要将商品作为道具传递给ItemList组件，例如

In your App.js you need to pass items as a prop to ItemList component like

 <ItemList items={this.state.items} />

在addItem函数中也将inputValue推送到items数组是不正确的，如下所示

Also in addItem function pushing inputValue to items array isn’t correct do something like below

  addItem = () => {
     this.setState(state => {
        let inputValue = this.input.current.value;
        if (inputValue !== '') {
            this.setState(prevState => ({
                items: [...prevState.items, inputValue]
            }));
         }
      })
  }

然后在ItemList.js中执行条件检查，然后再执行.map，也对.map中的一些错字错误

And in ItemList.js do conditional check before doing .map also some typo errors in .map

 import React from 'react';
 import Item from './Item';

  const ItemList = ({ items }) => {
      return (
          <div>
              {items && items.map(item => <Item key={item.id}
               text={item.text} />
              )}
            </div>
       )
   }

  export default ItemList;

尝试上述更改将起作用

如果有拼写错误，请原谅，因为我正在用手机应答

Please excuse me if there are any typo errors because I am answering from my mobile

这篇关于如何在React.JS中创建一个简单的列表制作器应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！