移除后仍保留动态行输入值的反应 [英] react dynamic row input value remained after remove

问题描述

我对以下代码有疑问

export class MultipleInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowCount: 1
    };
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
  deleteRow = () => this.setState({ rowCount: this.state.rowCount - 1 });
  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {i > 0 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
  };
  render() {
    const { rowCount } = this.state;
    return <div>{times(rowCount, this.renderRow)}
      <br /><br />
      problems
      <p>when there is more input, says i enter something in the input, fill something, then click remove, the value is filled in other value</p>
    </div>
  }
}

要重现，请单击添加，在第二个输入中填写一些值，然后在第二行中单击删除，输入的值就在其中.

演示 https://codesandbox.io/s/4x0x17zykx

解决方案

import React from "react";
import ReactDOM from "react-dom";

export class MultipleInput extends React.Component {
  state = {
    rowCount: 1
  };
  addRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount + 1,
    }));
  };
  deleteRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount - 1,
    }));
  };

  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
 };
 render() {
    const { rowCount } = this.state;
    return Array(rowCount).fill(1).map(i => this.renderRow(i));
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MultipleInput />, rootElement);

注意事项

您需要像上面那样增加/减少状态，在以前的状态上添加以更新当前状态； <​​/p>

在渲染中，我创建了一个新数组，其编号为rowCount.元素，以映射到renderRow方法.您不需要lodash.

当此组件中有多个输入字段时，现在还将显示删除按钮.即{rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}

I have a problem with below code

export class MultipleInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowCount: 1
    };
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
  deleteRow = () => this.setState({ rowCount: this.state.rowCount - 1 });
  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {i > 0 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
  };
  render() {
    const { rowCount } = this.state;
    return <div>{times(rowCount, this.renderRow)}
      <br /><br />
      problems
      <p>when there is more input, says i enter something in the input, fill something, then click remove, the value is filled in other value</p>
    </div>
  }
}

To reproduce click add, fill in some values in the 2nd input, then click delete for the second row, the value of the input is there.

Demo https://codesandbox.io/s/4x0x17zykx

解决方案

import React from "react";
import ReactDOM from "react-dom";

export class MultipleInput extends React.Component {
  state = {
    rowCount: 1
  };
  addRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount + 1,
    }));
  };
  deleteRow = () => {
    this.setState(({ rowCount }) => ({
      rowCount: rowCount - 1,
    }));
  };

  renderRow = i => {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    return (
      <div>
        <input type={type} value={value} />
        <button onClick={this.addRow}>add</button>
        {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}
      </div>
    );
 };
 render() {
    const { rowCount } = this.state;
    return Array(rowCount).fill(1).map(i => this.renderRow(i));
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MultipleInput />, rootElement);

Things to note

You need to increment/decrement your state like as above add on the previous state to update the current state;

In render I created a new array which has rowCount no. of elements, to map over the renderRow method. You don't need lodash for this.

Also the delete button will now be shown, when there is more then one input field in this component. i.e, {rowCount > 1 && <button onClick={this.deleteRow}>delete</button>}

这篇关于移除后仍保留动态行输入值的反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！