Реагируйте только на модал, используя последний элемент в отображенном наборе - PullRequest
Новая
       5

Реагируйте только на модал, используя последний элемент в отображенном наборе

0 голосов
/ 12 февраля 2019

У меня возникли некоторые проблемы в небольшом приложении, которое я создаю с использованием React, где я создаю дерево узлов, состоящее из корневого узла, дочерних узлов и узлов внуков.Кажется, я не могу получить модал React Bootstrap, обращающийся к правильной реквизите id дочернего узла, когда я запускаю функцию show модала.

В моем компоненте страницы я отображаю набор дочерних элементов в кореньузел.Как часть рендеринга дочернего элемента, я передаю данные от родителя, чтобы затем заполнить модальное поле, из которого вы можете редактировать имя этого дочернего узла.Код для дочернего узла приведен ниже: 

    import React, { Component } from 'react';
    import "./Nodes.css"
    import GrandchildNode from "./GrandchildNode"
    import EditNameForm from '../Form/EditNameForm/index';
    import { MyModal } from '../Modals';

    class ChildNode extends Component {

    constructor(props) {
      super(props)
      this.state = {
        modalId: this.props.id
      }
    }

    componentDidMount = () => {
      console.log(this.state.modalId)
    }

    render() {
      //console.log(this.state)
      let grandchildren = true;
      if (this.props.grandchildren.length === 0) {
        grandchildren = false
      }

    return (
      <div className='childWrapper'>
        <div className="childHeader">
          <div className="text" key={this.props.id}>{this.props.name}</div>
          <button className="edit" onClick={this.props.showNameEdit}>EDIT 
NAME</button>
          <button className="delete" onClick={() => 
    this.props.handleDelete(this.props.id)}>X</button>
        </div>
        <div className="childBody">
          {grandchildren ?
            this.props.grandchildren.map(item => {
              return <GrandchildNode key={item.id} name={item.name} parent= {item.parent} value={item.value}></GrandchildNode>
            }) : <div>No grandchildren to render</div>
          }
        </div>
        <MyModal
          show={this.props.showName}
          onHide={this.props.handleModalClose}
        >
          <EditNameForm
            errors={this.props.errorFields}
            handleInputChange={this.props.handleInputChange}
            name={this.props.name}
            newName={this.props.newName}
            handleModalClose={this.props.handleModalClose}
            handleFormSubmit={this.props.handleNameEdit}
            id={this.props.id}
          />
        </MyModal>
      </div>
    )
    }

    }

    export default ChildNode;

Когда открывается модал для редактирования, кажется, что он визуализирует модал один раз для каждого потомка, и поэтому последний потомок в списке становится тем,который редактируется - например: идентификатор Child1 - "abcd", идентификатор Child2 - "efgh";Когда я открываю модальное окно для редактирования Child1, я фактически редактирую Child2, потому что идентификатор Child2 был передан в модальное окно.Я могу подтвердить это с помощью некоторого кода, который я добавил в свой компонент EditNameForm: 

class EditNameForm extends Component {
  state={
    id:this.props.id
  }

  componentDidMount(){
    console.log(this.state.id)
  }

Файл console.log (this.state.id) выдает что-то вроде этого: 

5c6311aa2b0593287832b0a2 EditNameForm.js:10 
5c63177d7124e5333886d91d EditNameForm.js:10

I 'Я пытался понять, что здесь происходит, и у меня есть некоторые теории, но они предчувствуют - кто-нибудь с большим опытом React, пожалуйста, помогите мне понять а) что здесь происходит и б) как я могу настроить это так, чтобы модальныйоткрывается с правильным id проп?

1 Ответ

0 голосов
/ 13 февраля 2019

Вы можете использовать функцию getDerivedStateFromProps из Реактивный жизненный цикл компонента в вашем компоненте EditNameForm.

Также я не уверен, что это на самом деле props.id, который вы хотите передать в качестве реквизита для вашегоEditNameForm, потому что этот один идентификатор относится к родительскому компоненту и не будет изменен при щелчке любого дочернего компонента.Также нет функции, переданной от родителя, которая бы намекнула, что вы действительно измените родительское состояние.

Некоторые другие подсказки, которые могут помочь вашему развитию быть более плавным:

  • Подумайтедеструктурируйте ваши реквизиты и укажите их состояние перед использованием 

    const { errorFields, handleInputChange, name, newName, handleModalClose, handleNameEdit} = this.props;

<EditNameForm
    errors={errorFields}
    handleInputChange={handleInputChange}
    name={name}
    newName={newName}
    handleModalClose={handleModalClose}
    handleFormSubmit={handleNameEdit}
    id={this.props.id}
/>
    • Компонент, не вложенный ни в один дочерний элемент, должен быть заключен сразу

<GrandchildNode key={item.id} name={item.name} parent= {item.parent} value={item.value} />

...