如何从表单中添加到列表中？

Question

我目前正在学习 React，我正在尝试制作一个简单的列表。用户可以单击“添加到列表”按钮，将出现一个带有表单的模式窗口，用户可以在其中输入一行文本。提交表单时，文本输入应出现在无序列表中。我似乎无法让文本输入出现在无序列表中。我不确定我做错了什么。这是我的代码：

import React, {useState} from 'react';
import {Modal, Button, Form} from 'react-bootstrap';



function App() {

  const [newListItem, setNewListItem] = useState('');
  const [show, setShow] = useState(false);
  
  const changeOpen = () => setShow(true);
  const changeClose = () => setShow(false);
  
  var listItems = [];

 
  var addToList = (e) => {
    e.preventDefault();
    listItems.push(newListItem);
    console.log(newListItem);
  }
 
  var updateList = (e) => {
    setNewListItem(e.target.value);
    console.log(newListItem);
    e.preventDefault();
  }

  return (
    <div className="App">
      
      <h2>Simple List</h2>

      <Button onClick={changeOpen}>
        Add to the List
      </Button>


      <Modal show={show} onHide={changeClose}>
        <Modal.Header closeButton>
          <Modal.Title>This is the Title</Modal.Title>
        </Modal.Header>
              <form onSubmit={addToList}>
                <Modal.Body>               
                    <Form.Group>
                      <Form.Label>Item</Form.Label>
                      <br />
                      <Form.Control type="text" placeholder="Normal text" onChange={updateList} />
                    </Form.Group>
                </Modal.Body>
                    <Modal.Footer>
                    <Button type="sumbit">Add to List</Button>
                    </Modal.Footer>
              </form>
      </Modal>

      <ul>
        {listItems.map(item =>(
          <li>{item}</li>
        ))}
      </ul>

    </div>
  );
}

export default App;

状态变量“newListItem”被设置为来自表单的文本输入，并被添加到 listItems 数组中，但该数组未显示在无序列表元素中。如何让数组项显示？

Answer 1

没有错误的方法。试试这个工作代码

1. 使用直接状态变量一图函数显示列表
2. 使用useRef函数获取表单提交后的文本值
3. 并使用 spread operator 将新数组合并到旧数组

Demo

function App() {
  const [newListItem, setNewListItem] = useState([]);
  const [show, setShow] = useState(false);
  const input = useRef();
  const changeOpen = () => setShow(true);
  const changeClose = () => setShow(false);

  var addToList = e => {
    e.preventDefault();
    setNewListItem([...newListItem, input.current.value]);
  };

  return (
    <div className="App">
      <h2>Simple List</h2>

      <Button onClick={changeOpen}>Add to the List</Button>

      <Modal show={show} onHide={changeClose}>
        <Modal.Header closeButton>
          <Modal.Title>This is the Title</Modal.Title>
        </Modal.Header>
        <form onSubmit={addToList}>
          <Modal.Body>
            <Form.Group>
              <Form.Label>Item</Form.Label>
              <br />
              <Form.Control type="text" ref={input} placeholder="Normal text" />
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button type="sumbit">Add to List</Button>
          </Modal.Footer>
        </form>
      </Modal>

      <ul>
        {newListItem.map((item, b) => (
          <li key={b}>{item}</li>
        ))}
      </ul>
    </div>
  );
}