如何从模态输入值更新状态

Question

我想从模态中的值更新父组件的状态。 我的组件打开了一个模态，其中defaultValue中的数据已经设置了<TableRow />。我希望能够更改模态中的输入值或保存更改时更好地更新父组件的状态。

import React, { Component } from 'react';
import './Update.css';
import Search from '../Search/Search';
import axios from 'axios';
// import Modal from './Modal/Modal';

const Table = ({ data, openBookDetails }) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => 
                <TableRow key={row._id} row={row} openBookDetails={openBookDetails}/>
            )}
            {/* Remove key={row.id} inside TableRow because it is not used to set the data in the table */}
        </tbody>
    </table>
)

const TableRow = ({ row, openBookDetails }) => (
     <tr class="table-light" onClick={openBookDetails}>
        <th scope="row" >{row.title}</th>
        <td >{row.author}</td>
        <td >{row.isbn}</td>
        <td >24</td>
    </tr>
)

const Modal = ({ updateBookDetails, closeBookDetails, isBookDetailsOpen, children, data, grabTitle, grabAuthor, grabISBN }) => {
    const showHideClassName = isBookDetailsOpen ? 'modal display-block' : 'modal display-none';

    let selectedBookDetails = []
    // console.log(data)
    data.map(row => selectedBookDetails = row)
    // console.log(selectedBookDetails._id)
    // if(data) {
    //     console.log(data[0].title)
    //   }

    // data = data[0].toObject();
    // console.log(data.title)


    return (
      <div className={showHideClassName}>
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Update Book</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick={closeBookDetails}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label htmlFor="title">Title</label>
                                <input type="text" class="form-control" id="title" aria-describedby="title" placeholder="Enter title of book" defaultValue={selectedBookDetails.title} onChange={grabTitle}/>
                            </div>

                            <div class="form-group">
                                <label htmlFor="author">Author</label>
                                <input type="text" class="form-control" id="author" aria-describedby="author" placeholder="Enter author name" defaultValue={selectedBookDetails.author} onChange={grabAuthor}/>                        
                            </div>

                            <div class="form-group">
                                <label htmlFor="isbn">ISBN</label>
                                <input type="number" min="0" class="form-control" id="isbn" aria-describedby="isbn" placeholder="Enter ISBN number" defaultValue={selectedBookDetails.isbn} onChange={grabISBN}/>                               
                            </div>
                            <div class="form-group">
                                <label for="copies">Number of Copies</label>
                                <input type="number" min="0" class="form-control" id="copies" aria-describedby="copies" placeholder="Enter the number of copies"/>                  
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onClick={updateBookDetails}>Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick={closeBookDetails}>Close</button>
                        </div>

                    </div>
                </div>
          {children}
      </div>
    );
  };

class Update extends Component{
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            suggestions: [],
            setOfAllBooks: [],
            searchedBooks: [],
            isBookDetailsOpen: false,

            title: '',
            author: '',
            isbn: ''
        };

        // this.setTableData = this.setTableData.bind(this);
        // this.openBookDetails = this.openBookDetails.bind(this);
        // this.closeBookDetails = this.closeBookDetails.bind(this);
        // this.updateBookDetails = this.updateBookDetails.bind(this);
    }

    setTableData = (searchedBook) => {
        this.setState({searchedBooks: searchedBook})

        // console.log(this.state.searchedBooks)
    }

    openBookDetails = () => {
        // console.log('openBookDetails')
        this.setState({ isBookDetailsOpen: true})

        this.setState({ title: this.state.searchedBooks.title})
        this.setState({ author: this.state.searchedBooks.author})
        this.setState({ isbn: this.state.searchedBooks.isbn})
    }

    closeBookDetails = () => {
        this.setState({ isBookDetailsOpen: false})
    }

    grabTitle = () => {
        console.log('title changing')
        this.setState({ title: this.state.title })
        console.log(this.state.isbn)
    }

    grabAuthor = () => {
        this.setState({ author: this.state.author })
        console.log(this.state.isbn)
    }

    grabISBN = () => {
        this.setState({ isbn: this.state.isbn })
        console.log(this.state.isbn)
    }

    updateBookDetails = () => {

        console.log(this.state.searchedBooks[0]._id)
        console.log(this.state.searchedBooks[0].title)

        const existingBook = {
            id: this.state.searchedBooks._id,
            title: this.state.title,
            author: this.state.author,
            isbn: this.state.isbn,
            // noOfCopies: this.state.noOfCopies,
        };

        axios.put('./api/book/update', existingBook,)
            .then(res => console.log(res))
    }


    render(){
        return(
            <div>            
                <Search state={this.state} setTableData={this.setTableData} />
                <Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/>
                <Modal 
                    data={this.state.searchedBooks} 
                    isBookDetailsOpen={this.state.isBookDetailsOpen} 
                    closeBookDetails={this.closeBookDetails}
                    updateBookDetails={this.updateBookDetails} 
                    grabTitle={this.grabTitle}
                    grabAuthor={this.grabAuthor}
                    grabISBN={this.grabISBN}
                    state={this.state}
                />
                {/* <Modal /> */}
            </div>
        )
    }
}

export default Update;