时间戳

首页 > 解决方案 > 如何从另一个表单组件更新书籍列表？

javascript - 如何从另一个表单组件更新书籍列表？

问题描述

大家好，我有点新反应，我正在尝试关于某种图书库的教程。我有一个这样的AddNewBook组件form：

function AddNewBook(){
  const [name, setName] = useState("");
 
  const handleChange = e => setName(e.target.value);
  return (
    <input name="book-name" onChange={handleChange} />
  )
}

我还有另一个组件，我展示了这样的书：

function BooksList(){
  const [books, setBooks] = useState([]);

  return (books?.map((book, i) => <div key={i}>{book.name}</div>))
}

我有这样的App.js组件：

function App(){

 return (
  <div> 
   <AddNewBook />
   <BooksList />
  </div>
 );
}

我的问题是如何booksList以最佳实践方式更新。有可能我以后可能会扩展组件并在此周围有更多组件。

标签： javascriptreactjsreact-hooks

解决方案

您应该将 bookList 状态提升到 AddNewBook 和 BooksList 的父组件。然后将必要的东西作为道具传递给组件。

function App(){
    const [books, setBooks] = useState([]);
    
    function addBook(bookName) {
        setBooks([...books, { name: bookName }]);
    }

    return (
        <div>
            <AddNewBook onAddBook={addBook} />
            <BooksList books={books} />
        </div>
    );
}


function BooksList({ books }){
    return (books?.map((book, i) => <div key={i}>{book.name}</div>))
}

function AddNewBook({ onAddBook }){
    const [name, setName] = useState("");

    const handleChange = e => setName(e.target.value);
    return (
        <div>
            <input name="book-name" value={name} onChange={handleChange} />
            <button onClick={() => onAddBook(name)}>Add Book</button>
        </div>
    )
}

推荐阅读