Question

当我单击Dahboard表行中的项目时，我正在将道具从Dashboard组件传递到Modal Component。单击该行时，该行中的数据作为道具传递给模态，并且该模态在ComponenentWIllReceiveProps上同步设置其状态，因此它呈现在“模态输入”框和textarea中如何使用从Dashboard.js传递过来的道具将状态设置为模态，并在模态输入框和textarea中渲染它们

Dashboard.js

import React, { Component } from 'react'
import Modal from '../Modal/Modal'
import add from '../../images/add.png'
import addSelected from '../../images/addSelected.png'
import './Dashboard.css'

const TableRow = ({ row, openQuoteDetails, deleteQuote }) => (
  <tr>
    <th scope="row" onClick={openQuoteDetails}>{row.author}</th>
    <td onClick={openQuoteDetails}>{row.quote}<small id="admin" className="form-text text-muted">{row.admin}</small></td>
    <td><i className="fa fa-close" onClick={deleteQuote}></i></td>
  </tr>
)

const Table = ({ data, openQuoteDetails, deleteQuote }) => (
  <table className="table table-hover">
    <thead>
      <tr className="table-active">
        <th scope="col">Author</th>
        <th scope="col">Quote</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      {data.map((row, index) =>
        <TableRow key={index} row={row} openQuoteDetails={() => openQuoteDetails(row, index)} deleteQuote={() => deleteQuote(row, index)} />
      )}
    </tbody>
  </table>
)

class Dashboard extends Component {
  constructor() {
    super()

    this.state = {
      quotes: [
        {
          "quote": "Our industry does not respect tradition - it only respects innovation.",
          "author": "Satya Nadella",
          "admin": "Joseph Akayesi"
        },
        {
          "quote": "Engineering is the closest thing to magic that exists in the world.",
          "author": "Elon Musk",
          "admin": "Joseph Akayesi"
        },
        {
          "quote": "For me, it matters that we drive technology as an equalizing force, as an enabler for everyone around the world.",
          "author": "Sundar Pichai",
          "admin": "Yasmin Adams"
        }
      ],
      addSource: add,
      isModalOpen: false,
      index: '',
      author: '',
      quote: ''
    }
  }

  onAddMouseOver = () => {
    this.setState({ addSource: addSelected })
  }

  onAddMouseOut = () => {
    this.setState({ addSource: add })
  }

  toggleModalOpenOrClose = () => {
    this.setState({ isModalOpen: !this.state.isModalOpen })
    this.setState({ index: '' })
    this.setState({ author: '' })
    this.setState({ quote: '' })
  }

  openQuoteDetails = (row, index) => {
    this.setState({ isModalOpen: true });
    this.setState({ index: index, author: row.author, quote: row.quote })
  }

  deleteQuote = (row, index) => {
    this.setState({ isModalOpen: false })
    console.log('Row deleted')
    console.log(this.state.quotes.splice(index, 1))
  }






  render() {
    return (
      <div className='pt-3'>
        <Table
          data={this.state.quotes}
          openQuoteDetails={this.openQuoteDetails}
          deleteQuote={this.deleteQuote} />
        <div className='text-center align-items-center justify-content-centerpt-5'>
          <a href='#add' onClick={this.toggleModalOpenOrClose}>
            <img src={this.state.addSource} className='addButton mx-1' alt="add" onMouseOver={this.onAddMouseOver} onMouseOut={this.onAddMouseOut} />
          </a>
        </div>
        <Modal
          isModalOpen={this.state.isModalOpen}
          toggleModalOpenOrClose={this.toggleModalOpenOrClose}
          data={this.state}
          onInputChange={this.onInputChange}
          addNewQuote={this.addNewQuote}
          updateExistingQuote={this.updateExistingQuote} />
      </div>
    )
  }
}

export default Dashboard

Modal.js

import React, { Component } from 'react'
import './Modal.css'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { addQuote } from '../../actions/quoteActions'

class Modal extends Component {
    constructor(props) {
        super(props)

        this.state = {
            id: '',
            author: '',
            quote: '',
            errors: {}
        }
    }

    onInputChange = (event) => {
        this.setState({ [event.target.id]: event.target.value })
    }

    switchSaveChangesAction = () => {
        return this.props.state.index ? this.addNewQuote : this.updateExistingQuote
    }

    addNewQuote = () => {
        const { user } = this.props.auth

        const newQuote = {
            admin: user.id,
            quote: this.state.quote,
            author: this.state.author,
        }
        console.log('Add New')
        console.log(newQuote)
    }

    componentWillReceiveProps(nextProps) {
        console.log('receive props')

        if(nextProps.author !== this.props.author){
        this.setState({ author: nextProps.author})
        }
        // this.setState({ id: this.props.data.index })
        console.log(nextProps)
        this.setState({ author: this.props.data.author }, () => console.log(this.state.author))
        console.log(this.state)
    }

    updateExistingQuote = (index) => {
        console.log('Update Existing')
        console.log(this.props.state.author)
        console.log(this.props.state.quote)
        console.log(this.props.state.index)
    }

    render() {
        let showOrHideModal = this.props.isModalOpen ? 'modal d-block' : 'modal d-none'

        // let selectedQuoteDetails = {
        //     id: this.props.data.index ? this.props.data.index : '',
        //     author: this.props.data.author ? this.props.data.author : '',
        //     quote: this.props.data.quote ? this.props.data.quote : ''
        // };

        // let modalInputValue = selectedQuoteDetails ? selectedQuoteDetails : this.state
        let saveChangesAction = this.props.data.index >= 0 ? this.updateExistingQuote : this.addNewQuote
        return (
            <div className={showOrHideModal}>
                <div className='modal-dialog' role='document'>
                    <div className='modal-content'>
                        <div className='modal-header bg-light'>
                            <h5 className='modal-title'><b>Add a Quote</b></h5>
                            <button type='button' className='close' data-dismiss='modal' aria-label='Close' onClick={this.props.toggleModalOpenOrClose}>
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        </div>
                        <div className='modal-body'>
                            <div className='form-group'>
                                <label htmlFor='author'>Author</label>
                                <input type='text' className='form-control' id='author' aria-describedby='emailHelp' placeholder='Enter author' onChange={this.onInputChange} defaultValue={this.state.author} />
                            </div>
                            <div className='form-group'>
                                <label htmlFor='quote'>Quote</label>
                                <textarea className='form-control' id='quote' rows='3' placeholder='Enter quote' onChange={this.onInputChange} value={this.state.quote}></textarea>
                            </div>
                        </div>
                        <div className='modal-footer'>
                            <button type='button' className='btn btn-primary' onClick={saveChangesAction}>Save changes</button>
                            <button type='button' className='btn btn-secondary' data-dismiss='modal' onClick={this.props.toggleModalOpenOrClose}>Close</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Modal.propTypes = {
    addQuote: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
})

export default connect(mapStateToProps, { addQuote })(Modal)

在ComponentWIllReveiveProps上同步设置组件状态

0 个答案: