如何添加输入并向数组发送值

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>