时间戳

首页 > 解决方案 > react - 使用 for 循环创建 x 个组件实例

javascript - react - 使用 for 循环创建 x 个组件实例

问题描述

我正在解决一个有趣的反应练习，其中可以有多个输入字段并更改其中任何一个都会更新总和值，我想知道如何使用 for 循环创建 x 个输入元素。我创建了一个名为 createInputs 的函数，它接受一个数字并输出 Input 组件的一个实例。他们回来了 [object Object] [object Object] [object Object，我该如何解决？

class Input extends Component {
  state = {
    number: ''
  }

  handleInput = e => {
    const { value } = e.target;
    const parsedValue = value !== '' ? parseFloat(value) : value;

    if (parsedValue !== '') {
      if (Number.isInteger(parsedValue)) {
        this.setState({ number: parsedValue });
        this.props.updateSum(parsedValue, this.props.index);
      } else {
        alert('Please enter a valid (numeric) value for Input #' + this.props.index);
      }
    } else {
      this.setState({ number: '' });
      this.props.updateSum(0, this.props.index);
    }
  }

  render() {
    return (
      <div>
        <span>{this.props.index}</span>
        <input onChange={this.handleInput} type="text" value={this.state.number} />
      </div>
    )
  }
}

class Sum extends Component {
  state = {
    sum: []
  }

  createInputs = count => {
let ui = '';

for (let i = 0; i < count; i++) {
  ui+= <Input index={i} updateSum={this.updateSum} />
}

return ui;
  }

  updateSum = (e, index) => {
    const _sum = this.state.sum.slice(0);
    _sum[index] = e;
    this.setState({
      sum: _sum
    })
  }

  render() {
    const { count, sum } = this.state;
    return (
      <>
        {
          this.createInputs(this.props.count)
        }
        <div>
          <span>Sum: {sum.length > 0 ? sum.reduce((a, v) => a += v) : 0}</span>
        </div>
      </>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Sum count={3} />
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

因为在for loop你使用return. 在第一个循环期间，它将返回该值。取而代之的是把它们放进去array，然后再map过去。如果你不想要包装器<div>，你可以使用<React.Fragment> 

createInputs = count => {
    let arr = []
    for (let i = 0; i < count; i++) {
      arr.push(<Input index={i} updateSum={this.updateSum} />)
    }
    return(<div>
        {arr.map(input=>input)}
        </div>)
  }

如果您不想创建数组然后推送然后使用

createInputs = count => {
    return(<div>{Array(count).fill(1).map((input,i)=>(
            <Input index={i} updateSum={this.updateSum} />))}
           </div>)
  }

推荐阅读