如何在 React.JS 中创建一个简单的列表生成器应用程序？

IT技术 javascript reactjs create-react-app
2021-04-30 00:05:34

我正在开发一个简单的列表生成器，使用 create-react-app 来执行列表应用程序，但我在弄清功能时遇到了一些麻烦。我想用这个应用程序完成什么：

  • 我希望能够在输入中输入文本，按下按钮或按 Enter，并且任何文本都将列在应用程序的正文中。

  • 我希望能够创建一个按钮，该按钮将在任务或目标完成后删除列表项

到目前为止，我的代码已分解为以下组件：

应用程序、列表输入、项目列表、项目

应用程序的代码是 

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 的代码是：

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 的代码是：

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;

在我的react应用程序中，我返回了一个“项目”错误未定义，我很困惑为什么。

3个回答

在您的 App.js 中，您需要将项目作为props传递给 ItemList 组件，例如

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

同样在 addItem 函数中，将 inputValue 推送到 items 数组是不正确的，请执行以下操作

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

在 ItemList.js 中，在做 .map 之前做条件检查，在 .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;

尝试进行上述更改这会起作用

如果有任何拼写错误，请原谅，因为我是用手机回答的

您的 ItemList 不正确。看看下面更正的片段，您需要映射项目而不是项目（因此未定义错误项目）。此外，您需要将项目作为 app.js 中 ItemList 的props

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

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

export default ItemList;

在 app.js 中添加以下行。另外，我没有看到您的 app.js 中在做什么，将其删除。

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

好像你有一个错字ItemList。
它接收items（复数）作为props，但您正在使用item.

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

并且不要忘记将itemsprops实际传递给“ItemList”： 

<ItemList items={this.state.items} />
其它你可能感兴趣的问题
上一篇JS 中的动态 import() 文件 下一篇使用 react-contexify 在react表上react上下文菜单