如何进行附加输入并将值发送到数组

Question

我想知道如何制作一个按钮，每次用户单击它时都会生成一个新的<input>，并且我希望将其值添加到数组中。

我使用了我找到的这段代码，但它只完成了第一部分！

import React from "react";
import { Button, FormInput } from "shards-react";
  
class Parameter extends React.Component {
  
    id = 1;
  
      state = {
          list: []
      }
      
      item(id) {
          return (
            //   <div >

            //       <i className="material-icons" onClick={e => this.remove(`${id}`)} >delete</i>

            //   </div>);
            <FormInput className="mb-1" key={id} id={`param-${id}`} placeholder="Competetion parameters"/>
            );
      }
  
      remove(id) {
          const newList = this.state.list.filter(item =>item.key !== id);
          this.setState({
              list: newList
          })
      }
  
      addParam = () => {
        
          const list = this.state.list;
          list.push( this.item(this.id) )
          this.setState({ list });
          this.id++;
      }
  
      render() {
  
          return (
              <div>
                  <Button onClick={e => this.addParam()} theme="primary">Add parameter</Button>
                  {
                      this.state.list.map(item => item)
                  }
              </div>);
      }
    
  }
  
  export default Parameter;

我想知道如何将一组输入值放入数组 React 对我来说真的很新，如果有人可以帮助我，我会非常高兴！

Answer 1

我想知道如何制作一个按钮，每次用户单击它时都会生成一个新按钮，我希望将其值添加到数组中并使用 Axios 发布。

感觉这里有两个问题；一是如何处理状态（输入的数量），二是如何保存数组。

如果不检查 setLoading 的确切工作原理，我无法真正帮助第二个，但我有一个处理状态的建议。将每个输入值作为字符串添加到数组中，然后执行以下操作：

document.onreadystatechange = () => {
  const { useState } = React;

  function Boxes() {
    const [inputs, setInputs] = useState([]);

    const addInput = () => {
      setInputs(inputs.concat("abc"));
    };

    const changeInput = (index, value) => {
      const updated = [...inputs];
      updated[index] = value;
      setInputs(updated);
    };

    const handleAdd = () => {
      alert("Saving " + JSON.stringify(inputs));
    };

    return (
      <div>
        <p>inputs</p>
        {inputs.map((input, index) => {
          return (
            <div key={index}><input
              type="text"
              value={input}
              onChange={(e) => changeInput(index, e.target.value)}
            /></div>
          );
        })}
        <button onClick={addInput}>Add new input</button>
        <hr />
        <button onClick={handleAdd}>Add</button>
      </div>
    );
  }

  ReactDOM.render(<Boxes />, document.querySelector("#root"));
};

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>