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

Question

我正在解决一个有趣的 react 练习，其中可以有多个输入字段，并且更改其中任何一个都会更新总和值，我想知道如何使用 for 循环创建 x 个输入元素。我创建了一个名为 createInputs 的函数，它接受一个数字并输出输入组件的一个实例。它们返回为 [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;

Answer 1

因为在 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>)
  }