在React中，从多个相同的输入中获取信息并保存信息。

Question

我正在生成1到50个输入，这样用户就可以在输入数量的限制下写出自己的想法。我设定了这种收集输入的方式。但是当我把输入连接到我的 this.state.value 它只是将其更新为我正在输入的当前输入。这也影响了我保存那块单词的能力，因为它没有保存所有的单词。我已经尝试过 .push() 到一个新的数组中，但它仍然没有工作。onChange/handleChange 可能不是办法。只是保存提交时的价值？ 任何帮助将是非常感激的

生成输入

generateInputs = () => {
    const inputs = []
    for(let i = 1; i <= this.state.ranNum; i++){
      inputs.push(
        <Input type='text' onChange={this.handleChange} className='textInputs' /> <-----------
      )
    }
    return inputs;
  }

尝试保存文字（我也曾尝试过 .push() 与 event.target.value

  handleChange(event) {
    this.setState({value: event.target.value})
    const thoughtsArr = []
    thoughtsArr.push(event.target.value)
    console.log(thoughtsArr)
    return thoughtsArr
  }

提交按钮

generateSubmitButton = () => {
  return (
    <SubmitButton  onClick={this.handleSubClick} name='Submit Button' /> <-------------------
  )
}

所有的代码，如果需要的话

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

let timer = null

class Header extends React.Component {
  constructor() {
    super();
      this.state = {
        ranNum: null,
        isStart: true,
        timer: null,
        value: []
      }
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleSubClick = this.handleSubClick.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value})
    const thoughtsArr = []
    thoughtsArr.push(this.state.value)
    console.log(thoughtsArr)
    return thoughtsArr
  }

  handleSubmit(event) {
    // event.preventDefault();
    return (
      <DisplayPoem onDeleteClick="this.handleDeleteClick" name='Delete Thoughts' value={this.state.value} />
    )
  }

  displayPoem = (poem) => {

  }

  // savePoem = () => {
  //   let poemArr = [];
  //   const input = this.state.value;
  //   input.forEach(element => {
  //       poemArr.push(element);
  //   })
  //   // console.log(poemArr)
  //   return poemArr; 
  // }

handleClick() {
  clearTimeout(timer);
  this.clearForm();
  const ranNum = this.generateRanNum();
  this.generateInputs();
  this.changeToRestartText()

  this.countdownClock(ranNum);
}

handleSubClick() {
  this.handleSubmit()
  alert(this.state.value)
//  const poem = this.savePoem();
//  this.displayPoem(poem)
}

generateRanNum = () => {
  let ranNum = Math.floor(Math.random() * 20);
    this.setState({
      ranNum: ranNum,
    })
    return ranNum
}

changeToRestartText = () => {
  this.setState({isStart: false})
}

clearForm = () => {
  if(this.state.restart === true){
    const inputLi = <Input />;
    inputLi.map(element => {
        return element.remove()
    });
    const subButton = <SubmitButton />
    subButton.remove()
  }
}

countdownClock = async (ranNum) => {
const startingNum = ranNum * 20;
for(let i = startingNum; i >= 0; i--) {
    await new Promise(resolve => {
        timer = setTimeout(() => {
         this.setState({
           timer: i
         })
        resolve()
     }, 1000)
   });
  }
}

generateInputs = () => {
    const inputs = []
    for(let i = 1; i <= this.state.ranNum; i++){
      inputs.push(
        <Input type='text'   onChange={this.handleChange} className='textInputs' />
      )
    }
    return inputs;
  }

generateSubmitButton = () => {
  return (
    <SubmitButton  onClick={this.handleSubClick} name='Submit Button' />
  )
}

handleDeleteClick = () => {
   const displayPoem = <DisplayPoem />
   displayPoem.remove()
}



  render() {
    return (
      <div>
        <header>
          <div className="headerContainer">
              <div id="countdown">
                <Countdown name='Countdown: ' countdown={this.state.timer} />
              </div>
              <div className="flex-item-header">
                <StartButton 
                    name={this.state.isStart ? 'Start Game' : 'Restart Game'}
                    onClick={() => this.handleClick()}
                />            
                </div>
              <div>
                  <DisplayCount name='Word Count: ' count={this.state.ranNum} />
              </div>
          </div>
        </header>
        <section>
          <div>
            <ol>
              {this.handleSubmit()}
            </ol>

          </div>
          <div className="flex-main-item"> 
          <form onSubmit={this.handleSubmit}>
            <ul>
              {this.generateInputs()}
            </ul>
            {this.generateSubmitButton()}
            </form>
          </div>
        </section>
      </div>
    )
  }
}

class DisplayPoem extends React.Component {
  render(){
    return (
      <li>
        <span>{this.props.value}</span>
        <button onCLick={this.props.onClick}>{this.props.name}</button>
      </li>
    )
  }
}

class StartButton extends React.Component {
  render(props) {
      return (
        <button onClick={this.props.onClick}>{this.props.name}</button>
      )
    }
  }

class SubmitButton extends React.Component {
  render() {
    return (
      <button  type={this.props.type} value={this.props.value} onClick={this.props.onClick}>
        {this.props.name}
      </button>
    )
  }
}

class DisplayCount extends React.Component {

  render() {
    return (
      <p>
        {this.props.name}
        <span>{this.props.count}</span>
      </p>
    )
  }
}

class Countdown extends React.Component {
  render(props) {
    return (
      <p>
        {this.props.name}
        <span>{this.props.countdown}</span>
      </p>
    )
  }
}

class Saved extends React.Component {
  render() {
    return (
      <div className="flex-main-item">
        <ol >

        </ol>
      </div>
    )
  }
}

class Image extends React.Component {
  render(){
    return (
      <div className="flex-main-item">
        <img className="mainImage" src='https://uploads3.wikiart.org/images/wladyslaw-strzeminski/cover-for-a-book-by-julian-przybo-z-ponad-1930.jpg!Large.jpg'/> 
      </div>
     )
  }
}

class Input extends React.Component {
  render(props) {
    return (
      <li className={this.props.className}>
          <input   onChange={this.props.onChange} type={this.props.type}  />
        </li>
    )
  }
}

class Game extends React.Component {
  render(){
    return (
      <div>
        <Header />
        <Saved />
        <Image />
      </div>
    )
  }
}

ReactDOM.render(

    <Game />

,
  document.getElementById('root')
);

Answer 1

你必须把你的 i 变量，这样你就可以重新调整 <input> 你正在编辑的元素。这就是我们的想法。

generateInputs = () => {
    const inputs = []
    for(let i = 1; i <= this.state.ranNum; i++){
      inputs.push(
        <Input type='text' onChange={(event) => { this.handleChange(i, event); }} className='textInputs' /> <-----------
      )
    }
    return inputs;
  }

然后，

 handleChange(i, event) {

    const newValues = [...this.state.values];
    newValues[i]    = event.target.value;

    this.setState({ values: newValues })
 }

(这也需要初始化 this.state.values 用一个数组来存储50个输入值)