问获取输入值并动态创建新数组

EN

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(),
      values: []
    };
  }

  handleChange(i, e) {
    this.setState({
      values: { ...this.state.values, [i]: e.target.value }
    });
  }
  save = () => {

    var form = new FormData(document.getElementById("myForm"));
    form.getAll("username");
    const adddata = form.getAll("username")
    console.log(adddata)

  };
  render() {

    var fieldsArray = [];

    for (var i = 0; i <= this.state.data; i++) {
      fieldsArray.push(
        <div>
          <label>
            <div className="label">{i}</div>
            <input
              type="text"
              value={this.state.values[i]}
              name={this.state.values[i]}
              onChange={this.handleChange.bind(this, i)}
            />
          </label>
        </div>
      );
    }


    var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
      key,

      value
    }));

    const addrow = outputAdd;
    var formData = new FormData();
    const Add = ({ journals }) => (
      <div>
        <form id="myForm" name="myForm">

          {journals.map(journal => (
            <div>
              <div>
                <label for="username">{journal.key}</label>
                <input type="username" id="username" name="username"/>
              </div>

            </div>
          ))}
        </form>
      </div>
    );


    return (
      <div className="inputs">
        <Add journals={addrow} />
        {fieldsArray}
        <button onClick={this.save}>save</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));