Question

您好我一直在使用React / Redux for may App。我必须动态渲染多个输入字段。我现在面临的问题是......

所以假设，表单已经有2个输入字段，我想要总共5个输入字段，我将简单地在5个重复循环的帮助下渲染它们。问题是反应呈现3个新领域，并保持2个旧的顶部。但我需要新的5个领域。有没有办法强制反应首先删除旧字段，然后渲染5个新字段。

Answer 1

问题出在关键属性中。如果为每个渲染提供组件新键，则将重新创建字段

下面是一个小例子。我使用Math.and（）生成唯一键。当然，最好使用shortid或类似的

https://www.npmjs.com/browse/keyword/shortid

class InputRenderer extends Component {

  constructor() {
    super()
    this.state = {
      inputsCount: 3
    }
  }

  handleInputsCountChange = (newCount) => {
    this.setState({
      inputsCount: newCount
    })
  }

  renderInputs = () => {
    const inputs = []
    for (let i = 0; i < this.state.inputsCount; i++) {
      inputs.push(<input key={i + Math.random()} />)
    }
    return inputs
  }

  render = () =>
    <div>
      <button onClick={() => this.handleInputsCountChange(3)}>3</button>
      <button onClick={() => this.handleInputsCountChange(5)}>5</button>
      {this.renderInputs()}
    </div>
}

React / Redux组件重新渲染

1 个答案: