创建列表生成器comâreact-DEV365 开发者社区

React 是一个流行的JavaScript库，广泛用于现代Web应用程序的开发中。它的使用简化了繁殖交互式和动态的常规接口的过程。在本文中，我们将使用 react 。

什么是列表生成器？

a 列表生成器是一种工具，可帮助生成动态元素的列表。这样，我们可以创建一个任务列表，购物清单，联系人列表等。借助 React ，我们可以创建一个列表生成器，可以实时添加，删除和编辑项目。

创建 React 项目

要创建列表生成器 com react ，我们需要遵循几个步骤。

首先，我们需要创建一个新项目 React 。我们可以使用Create-React-App进行此操作。请记住，为此，必须安装node.js和NPM。

Aprenda a criar um servidor Node.js do zero em apenas 10 minutos!

打开终端或命令提示

npm install -g create-react-app

# ou

yarn global add create-react-app

在©文件夹中浏览您要创建项目并运行以下命令以创建一个新项目 React ，其名称为“ my-prodject”：

npx create-react-app meu-projeto

# ou

yarn create react-app-app meu-projeto

等待要安装的所有依赖性。过程完成后，导航到项目的方向：

cd meu-projeto

安装项目设计的@material-ui/core：

npm install @material-ui/core

# ou

yarn add @material-ui/core

运行以下命令以启动开发服务器：

npm start

# ou

yarn start

等待开发服务器启动，然后在[localhost 3000）中打开浏览器[http://localhost:3000）。您会看到 react 的主页。

创建表单并列出数据

我们需要创建一种允许您将项目添加到列表中的公式组件的形式。此表格应包括文本输入字段和运输按钮。

用户添加了列表项目后，我们需要在屏幕上显示它。我们可以通过创建另一个组件来做到这一点，该组件在HTML列表元素上呈现列表上的每个项目。我们可以使用JavaScript映射函数在项目列表中迭代并在HTML列表的元素上渲染。

让我们首先创建Todatem组件，该组件将包含每个数组数据的信息。

import **React** from '**React**';

function TodoItem(props) {
  return (
    <div>
      {props.text}
    </div>
  );
}

export default TodoItem;

我们现在将创建Todalist组件，该组件将行走数组并列出数据。

import **React** from '**React**';
import TodoItem from './TodoItem';

function TodoList(props) {
  return (
    <div>
      {props.items.map((item, index) => (
        <TodoItem key={index} text={item} />
      ))}
    </div>
  );
}

export default TodoList;

最后，我们的app.js的代码

import **React**, { useState } from '**React**';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import TodoList from './components/TodoList';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
  button: {
    margin: theme.spacing(1),
  },
}));

function App() {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState('');
  const [items, setItems] = useState([]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = () => {
    setItems([...items, inputValue]);
    setInputValue('');
  };

  return (
    <div className="App">
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          id="standard-basic"
          label="Adicionar tarefa"
          value={inputValue}
          onChange={handleInputChange}
        />
        <Button
          variant="contained"
          color="primary"
          onClick={handleButtonClick}
          className={classes.button}
        >
          Adicionar
        </Button>
      </form>
      <TodoList items={items} />
    </div>
  );
}

export default App;

包括£o

创建列表生成器 com react 对于涉及创建动态元素列表的项目可能是一项非常重要的任务。借助 React ，我们可以创建一个组件，该组件允许通常的时间从列表中添加，删除和编辑项目。从最复杂的项目管理应用程序中的简单任务列表来看，这可能非常适合各种项目。

。