javascript - 从 ReactJS 的组件列表中删除组件

Question

我有一个reactjs代码，在单击按钮时添加表单。现在我想在组件中单击删除按钮时删除单个表单。我在测试组件中有删除按钮。当我按下任何删除按钮时，我面临的问题是所有表单都会被删除，我只想删除一个特定的表单。

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test.js';

class App extends Component {
  state={
    numform: 0
  }

  Addform()
  {
    this.setState({
      numform: this.state.numform + 1
    }); 
  }

  render() {
    const form = [];
    for(var i=0;i<this.state.numform;i+=1)
    {
      form.push(<Test key={i}/>);
    }
    return(
        <div className="App ">
          <div className="App-header App-intro">
            <button onClick={()=>this.Addform()}>+</button>
          </div>
            {form}
        </div>
    );
  }

}

export default App;

测试.js

import React, { Component } from 'react';
import logo from './logo.svg';

class Test extends Component {
  Removeform()
  {
    this.props.delete_this(this.props.key); 
  }
  render() {
    return(
        <form>

          <input type="text" name="i1"></input> 
          <input type="text" name="i2"></input>
          <input type="submit" value="submit"></input>
          <button value="Remove" onClick={()=>this.Removeform()}>Remove</button>
        </form>
    );
  }
}

export default Test;

Answer 1

这是一种可能错误的方法。我更改了函数和状态的一些名称。此外，您还需要一个删除函数来传递您的 Test 组件并使用表单的 id(此处为 form 属性)调用它。

对于表单，我正在创建一个包含数字的数组。创建每个表单后，该数字就会增加。然后通过映射这个数组，我使用 form 属性渲染表单。为了删除表单，我正在过滤数组并返回一个不带此数字的新数组。

再说一遍，我认为这是一种错误的做法。只需将表单创建为对象并赋予它们唯一的 ID 即可。

class App extends React.Component {
  state = {
    forms: [],
    lastNum: 0,
  }

  addForm = () => {
    this.setState( prevState => ( {
      forms: [ ...prevState.forms, prevState.lastNum++ ],
    } ));
  }

  removeForm = form => {
    const newForms = this.state.forms.filter( el => el !== form  );
    this.setState( { forms: newForms } );
  }

  render() {
    const forms = this.state.forms.map( form => (
      <Test key={form} form={form} removeForm={this.removeForm} />
    ));

    return (
      <div className="App ">
        <div className="App-header App-intro">
          <button onClick={this.addForm}>+</button>
        </div>
        {forms}
      </div>
    );
  }
}

const Test = ( props ) => {
  const handleRemove =  e => {
    e.preventDefault();
    props.removeForm( props.form );
  }
  return (
    <form>
      <input type="text" name="i1"></input>
      <input type="text" name="i2"></input>
      <input type="submit" value="submit"></input>
      <button value="Remove" onClick={handleRemove}>Remove</button>
    </form>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

更新

这可能是一个稍微增强的版本。使用对象作为表单，通过 id 保存它们。但是，这是你的代码，这是你的逻辑。例如，在此表单中只有两个输入，并且它们的名称是固定的，如您的示例中所示。您只想要两个还是想要更多？你的代码，你的逻辑。

class App extends React.Component {
  state = {
    forms: {},
  };

  addForm = () => {
    const newForm = {
      id: guid(),
      i1: "",
      i2: "",
    }
    this.setState(prevState => ({
      forms: { ...prevState.forms, [newForm.id]: newForm },
    }));
  };

  removeForm = id => {
    const forms = { ...this.state.forms };
    delete forms[id];
    this.setState({ forms });
  };

  onChange = ( e ) => {
    const { id, name, value } = e.target;
    this.setState( prevState => ( {
      forms: { ...prevState.forms, [id]: { ...prevState.forms[id], [name]: value } }
    } ));
  };

  onSubmit = id => { 
    const { i1, i2 } = this.state.forms[id];
    alert( `Form id: ${id}, input1: ${i1}, input2: ${i2} ` );
  }

  renderForms = () => Object.keys(this.state.forms).map(key => (
    <FormItem
      key={this.state.forms[key].id}
      id={this.state.forms[key].id}
      removeForm={this.removeForm}
      onChange={this.onChange}
      onSubmit={this.onSubmit}
      />
  ));

  render() {
    return (
      <div className="App ">
        <div className="App-header App-intro">
          <button onClick={this.addForm}>+</button>
        </div>
        {this.renderForms()}
      </div>
    );
  }
}

const FormItem = (props) => {
  const { id, removeForm, onChange, onSubmit } = props;
  
  const handleRemove = () => removeForm(id);
 
  const handleSubmit = e => {
    e.preventDefault();
    onSubmit( id );
  } 

  return (
    <form onSubmit={handleSubmit}>
      <input id={id} onChange={onChange} type="text" name="i1"></input>
      <input id={id} onChange={onChange} type="text" name="i2"></input>
      <button type="submit">Submit</button>
      <button value="Remove" onClick={handleRemove}>Remove</button>
    </form>
  );
}

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>