reactjs - 有没有办法动态附加到在反应JS

Question

我想制作一个 todo 应用程序，因为我是 ReactJS 的初学者（是的，我正在自学，而且我还在上高中！）。所以，我想在 ul 后面加上一个 li！

我已经尝试将待办事项记录到控制台，它也可以工作，但现在我想将 li 添加到 ul

表单.js

import React, { Component } from 'react';
import '../Styles/Forms.css';

class Form extends Component {
    constructor() {
        super();
        this.state = { todo: '' };
        this.handleTodo = this.handleTodo.bind(this);
        this.handleAddTodo = this.handleAddTodo.bind(this);
    }

    render() {
        return (
            <div className='center-v-h'>
                <form>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <input type='text' onChange={this.handleTodo} />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button onClick={this.handleAddTodo} style={{ width: '100%' }}>
                                        Add Todo
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
                <ul id='todo'></ul>
            </div>
        );
    }

    handleTodo(e) {
        this.setState({ todo: e.target.value });
    }

    handleAddTodo(e) {
        e.preventDefault();
        console.log(`Todos: ${this.state.todo}`);
    }
}

export default Form;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './Components/Form';

function App() {
    return (
        <div>
            <Form />
        </div>
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

标签： reactjs

Answer 1

你有这样的状态：

this.state = { todos: 
   [
      {id: 1, text: "Todo 1"},
      {id: 2, text: "Todo 2"},
      {id: 3, text: "Todo 3"}
   ]
}

您可以像这样使用map operator动态渲染ul > li：

<ul>
   {
      this.state.todos.map(todo => {
         return <li key={todo.id}>{todo.text}</li>
      })
   }
</ul>