Удалить текущий индекс из массива в React onClick

Question

Я довольно новичок в React. Я построил компонент, который добавляет поле ввода onClick. Что мне нужно сделать, так это добавить функциональность к кнопке под каждым новым входом, который удаляет этот вход c. Например, если 3 входа созданы 1,2,3, а вход 2 удален, 1 и 3 остаются.

Мой код содержит функцию с именем onRemoveChild (), которая имеет закомментированный код моей первоначальной попытки решения проблема с использованием closest (). Проблема заключается в том, что состояние не обновляется правильно, поэтому после удаления входных данных номера полей не совпадают c.

Заранее спасибо, и дайте мне знать, если потребуется дополнительное объяснение.

import React from 'react'
import { 
    Button,
    TextField,
    Typography, 
    } from '@material-ui/core'

class TextFieldAddNew extends React.Component {
    state = {
      numChildren: 0
    }

    render () {
      const children = [];
      for (var i = 0; i < this.state.numChildren; i += 1) {
        children.push(<ChildComponent key={i} number={i+2} removeChild={this.onRemoveChild} />);
      };
      return (
        <ParentComponent addChild={this.onAddChild} theCount={this.state.numChildren}>
          {children}
        </ParentComponent>
      );
    }

    onAddChild = () => {
      this.setState({
        numChildren: this.state.numChildren + 1
      });
    }
    onRemoveChild = () => {
      document.getElementById('removeInput').closest('div').remove();
    }
  }

  const ParentComponent = (props) => (
    <div className="card calculator">
      <div id="childInputs">
        {props.children}
      </div>
      {
        props.theCount >= 4 ? (
          <div className="warning">
            We recommend adding no more that 5 opt-in's
          </div>
        ) : ''
      }
      <Button
        className="addInput"
        onClick={props.addChild}>
            + Add another option
      </Button>
    </div>
  );

  const ChildComponent = (props) => (
    <>
      <TextField 
          id={'opt-in-' + props.number}
          label={'Opt-in ' + props.number}
          name={'opt-in'}
          variant="outlined" 
          size="small" 
          margin="normal" 
          color="secondary"
          className="halfInput"
      />
      <Typography id="removeInput" className="removeInput"
        onClick={props.removeChild}>
          - Remove option
      </Typography>
      </>
  );

export default TextFieldAddNew;

Answer 1

Вы можете передать индекс как часть вызова removeChild, как показано ниже:

children.push(<ChildComponent key={i} number={i+2} removeChild={()=>{this.onRemoveChild(i)}}

Кроме того, вместо того, чтобы держать numChildren в состоянии, вы должны оставить дочерние элементы. Таким образом было бы легко удалить и добавить к нему узлы. Затем вы можете легко сделать: children.splice (i, 1), а затем обновить состояние, таким образом, автоматический рендер обновит dom для вас.