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

Posted 2023-02-22

【中文标题】如何进行附加输入并将值发送到数组

【英文标题】：how to make an appending input and send value to an array

【发布时间】：2021-12-10 06:16:42

【问题描述】：

我想知道如何制作一个按钮，每次用户单击它时都会生成一个新的<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 对我来说真的很新，如果有人可以帮助我，我会非常高兴！

【问题讨论】：

嗨！事实上，你的问题真的不清楚。请首先格式化您的问题（修复代码样式，例如缩进级别）并删除不必要的位..也可以添加整个组件或仅添加相关部分。之后，请再次阅读您的问题，并亲自查看您的要求是否清楚，是否可以澄清一下:)

您的示例代码中甚至存在一些语法问题（参见 setLoading）

@JoelPeltonen 我说得更清楚了，现在可以了吗？

【参考方案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>

【讨论】：

谢谢！我再次编辑了这个问题，所以只显示了数组的问题。如何调用数组？