单击子组件按钮时卸载组件 // 反应

Question

我正在努力通过单击按钮成功删除组件。 然而，我在互联网上发现了类似的主题，其中大多数都描述了如果所有内容都在同一个组件中呈现，该怎么做。 在我的情况下，我在子组件中触发删除函数并将此信息传递给父组件，以便可以更改状态。 但是我不知道如何提升特定组件的索引，这导致了一个问题 - 我相信。

有一个代码

父组件

export class BroadcastForm extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          numberOfComponents: [],
          textMessage: ''
        }
        this.UnmountComponent = this.UnmountComponent.bind(this)
        this.MountComponent = this.MountComponent.bind(this)
        this.handleTextChange = this.handleTextChange.bind(this)
      }

      MountComponent () {
        const numberOfComponents = this.state.numberOfComponents
        this.setState({
          numberOfComponents: numberOfComponents.concat(
            <BroadcastTextMessageForm key={numberOfComponents.length} selectedFanpage={this.props.selectedFanpage}
              components={this.state.numberOfComponents}
              onTextChange={this.handleTextChange} dismissComponent={this.UnmountComponent} />)
        })
      }

      UnmountComponent (index) {
        this.setState({
          numberOfComponents: this.state.numberOfComponents.filter(function (e, i) {
            return i !== index
          })
        })
      }

      handleTextChange (textMessage) {
        this.setState({textMessage})
      }

      render () {
        console.log(this.state)
        let components = this.state.numberOfComponents
        for (let i = 0; i < components; i++) {
          components.push(<BroadcastTextMessageForm key={i} />)
        }
        return (
          <div>
            <BroadcastPreferencesForm selectedFanpage={this.props.selectedFanpage}
              addComponent={this.MountComponent}
              textMessage={this.state.textMessage} />

            {this.state.numberOfComponents.map(function (component) {
              return component
            })}
          </div>
        )
      }
    }

    export default withRouter(createContainer(props => ({
      ...props
    }), BroadcastForm))

子组件

import React from 'react'
import { createContainer } from 'react-meteor-data'
import { withRouter } from 'react-router'
import { BroadcastFormSceleton } from './BroadcastForm'

import './BroadcastTextMessageForm.scss'

export class BroadcastTextMessageForm extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.unmountComponent = this.unmountComponent.bind(this)
  }

  handleChange (e) {
    this.props.onTextChange(e.target.value)
  }

  unmountComponent (id) {
    this.props.dismissComponent(id)
  }

  render () {
    console.log(this.props, this.state)
    const textMessage = this.props.textMessage
    return (
      <BroadcastFormSceleton>
        <div className='textarea-container p-3'>
          <textarea id='broadcast-message' className='form-control' value={textMessage}
            onChange={this.handleChange} />
        </div>
        <div className='float-right'>
          <button type='button'
            onClick={this.unmountComponent}
            className='btn btn-danger btn-outline-danger button-danger btn-small mr-3 mt-3'>
            DELETE
          </button>
        </div>
      </BroadcastFormSceleton>

    )
  }
}

export default withRouter(createContainer(props => ({
  ...props
}), BroadcastTextMessageForm))

我在访问正确的组件时遇到问题，并通过更改状态将其删除。 任何想法如何实现它？

Answer 1

请修复您的代码中的以下问题。

1. 不要改变组件的状态。 使用setState不变地更改状态。
2. 不要使用数组索引作为组件的键。 尝试使用组件唯一的 id 字段。 这也将有助于识别您需要卸载的组件。

Answer 2

尝试这样的事情。 如前所述，您不想使用数组索引作为键。

 class ParentComponent extends React.Component { constructor() { this.state = { // keep your data in state, as a plain object textMessages: [ { message: 'hello', id: '2342334', }, { message: 'goodbye!', id: '1254534', }, ] }; this.handleDeleteMessage = this.handleDeleteMessage.bind(this); } handleDeleteMessage(messageId) { // filter by Id, not index this.setState({ textMessages: this.state.textMessages.filter(message => message.id !== messageId) }) } render() { return ( <div> {this.state.textMessages.map(message => ( // Use id for key. If your data doesn't come with unique ids, generate them. <ChildComponent key={message.id} message={message} handleDeleteMessage={this.handleDeleteMessage} /> ))} </div> ) } } function ChildComponent({message, handleDeleteMessage}) { function handleClick() { handleDeleteMessage(message.id) } return ( <div> {message.message} <button onClick={handleClick} > Delete </button> </div> ); }