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

我正在努力通过点击按钮成功移除组件。我在互联网上发现了类似的主题，但是，大多数主题都描述了如果所有内容都在同一个组件中呈现，该如何做。在我的例子中，我在子组件中启动要删除的函数，并将此信息传递给父组件，以便可以更改状态。然而，我不知道如何提高特定成分的指数，这导致了一个问题——我相信

有一个密码

父组件

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))

导出类广播表单扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
numberOfComponents:[]，
文本消息：“”
}
this.UnmountComponent=this.UnmountComponent.bind（this）
this.MountComponent=this.MountComponent.bind（this）
this.handleTextChange=this.handleTextChange.bind（this）
}
安装组件（）{
const numberOfComponents=this.state.numberOfComponents
这是我的国家({
numberOfComponents:numberOfComponents.concat(
)
})
}
卸载组件（索引）{
这是我的国家({
numberOfComponents:this.state.numberOfComponents.filter（函数（e，i）{
返回i！==索引
})
})
}
handleTextChange（文本消息）{
this.setState（{textMessage}）
}
渲染（）{
console.log（this.state）
让components=this.state.numberOfComponents
for（设i=0；i({
…道具
})，表格（

子组件

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))

从“React”导入React
从“react meteor data”导入{createContainer}
从“react router”导入{withRouter}
从“/BroadcastForm”导入{BroadcastFormSceleton}
导入“./BroadcastTextMessageForm.scss”
导出类BroadcastTextMessageForm扩展React.Component{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）
this.unmountComponent=this.unmountComponent.bind（this）
}
手变（e）{
this.props.onTextChange（e.target.value）
}
卸载组件（id）{
此.props.dismissComponent（id）
}
渲染（）{
console.log（this.props，this.state）
const textMessage=this.props.textMessage
返回(
删除
)
}
}
使用路由器导出默认值（createContainer（props=>({
…道具
})，BroadcastTextMessageForm）

---

我无法访问正确的组件并通过更改状态将其删除。有什么想法可以实现吗？

请修复代码中的以下问题

。使用

setState

不可变地更改状态

。尝试使用组件唯一的id字段。这也有助于确定需要卸载的组件

---

试试这样的。如前所述，您不希望使用数组索引作为键

类ParentComponent扩展了React.Component{ 构造函数（）{ 此.state={ //将数据作为普通对象保持在状态 短信：[ { 留言：“你好”， id:'2342334'， }, { 留言：“再见！”， id:'1254534'， }, ] }; this.handleDeleteMessage=this.handleDeleteMessage.bind（this）； } handleDeleteMessage（消息ID）{ //按Id筛选，而不是按索引筛选 这是我的国家({ textMessages:this.state.textMessages.filter（message=>message.id！==messageId） }) } render（）{ 返回( {this.state.textMessages.map（message=>( //使用id作为密钥。如果您的数据没有唯一的id，请生成它们。 ))} ) } } 函数ChildComponent（{message，handleDeleteMessage}）{ 函数handleClick（）{ handleDeleteMessage（message.id） } 返回( {message.message} 删除 ); }