Javascript 添加多个输入行，并使用reactJS将其添加到fetch方法中

我想通过单击按钮添加一些输入行，并将其添加到状态，以便将其发送到服务器，但我不确定如何将其添加到fetch方法，或者即使已将其添加到状态

这就是我到目前为止所做的：

export class AdminPage extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
          sendeEmail: '',
          matrialeliste: [{
          matrialer: '',
          antal: '',
          pris: ''}]
        };
      }
      handleUserInput = (e) => {
        if (["matrialer", "antal", "pris"].includes(e.target.className) ) {
          let matrialeliste = [...this.state.matrialeliste]
          //matrialeliste[e.target.dataset.id][e.target.className] = e.target.value
          this.setState({ matrialeliste }, () => console.log(this.state.matrialeliste))
        } else {
          const name = e.target.name;
          const value = e.target.value;
          this.setState({[name]: value};
        }
      }
      addMatrialeliste = (e) => {
        this.setState((prevState) => ({
          matrialeliste: [...prevState.matrialeliste, {matrialer:"", antal:"", pris:""}],
        }));
      }
      onSubmitSignIn = (event) => {
        event.preventDefault();

            fetch(`${api.url}/form`, {
                method: 'post',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    sendeEmail: this.state.sendeEmail,          
                })
            })
            .then((response) => (response.json()))
            .catch(error => console.log(error));
    }

      render(){
        let {matrialeliste} = this.state;
          return(

            <div>
              <div>
                <h1>Arbejds seddel</h1>
                <form>

                    <div>
                      <button type="button" onClick={this.addMatrialeliste}>
                            tilføj materialer
                          </button>
                    {
                      matrialeliste.map((val, idx) => {

                        return(
                      <div key={idx}>
                      <div>
                        <label htmlFor="matrialer">
                            Matrialeliste
                          </label>
                          <input name='matrialer' type="text" className='matrialer' onChange={this.handleUserInput} />
                      </div>

                      <div>
                        <label htmlFor="antal">
                            Antal
                          </label>
                          <input name='antal' type="number" className='antal' onChange={this.handleUserInput} />
                      </div>

                      <div>
                        <label htmlFor="pris">
                            Pris
                          </label>
                          <input name='pris' type="number" className='pris' onChange={this.handleUserInput} />
                      </div>

                    </div>)})}
                    <label htmlFor="email">
                            E-mail
                          </label>
                    <input name='email' type="email" onChange={e => this.handleUserInput} />
                      <button type="submit">Send som E-mail</button>

                  <div>
                   <button type="submit" disabled=this.state.formValid}>Create</button>
                  </div>
                  </div>
                </form>
              </div>
          </div>
          );
      }
}

导出类AdminPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
sendeEmail:“”，
矩阵列表：[{
matrialer:“，
安塔尔：，
pris:“}]
};
}
handleUserInput=（e）=>{
if（[“matrialer”、“antal”、“pris”]包括（例如target.className））{
让matrialeliste=[…this.state.matrialeliste]
//matrialeliste[e.target.dataset.id][e.target.className]=e.target.value
this.setState（{matrialeliste}，（）=>console.log（this.state.matrialeliste））
}否则{
const name=e.target.name；
常量值=e.target.value；
this.setState（{[name]：value}；
}
}
addMaterialListe=（e）=>{
this.setState（（prevState）=>({
matrialeliste:[…prevState.matrialeliste，{matrialer:，antal:，pris:}]，
}));
}
onSubmitSignIn=（事件）=>{
event.preventDefault（）；
获取（`${api.url}/form`{
方法：“post”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify({
sendeEmail:this.state.sendeEmail，
})
})
。然后（（response）=>（response.json（）））
.catch（错误=>console.log（错误））；
}
render（）{
设{matrialeliste}=this.state；
返回(
阿贝兹赛德尔酒店
tilføj materialer
{
MaterialListe.map（（val，idx）=>{
返回(
基质李斯特
安塔尔
普里斯
)})}
电子邮件
this.handleUserInput}/>
发送som电子邮件
创造
);
}
}

我可以添加额外的行，但我不知道如何将其添加到fetch方法中

---

我想我可以映射它，但我仍然不确定如何使用plain React创建表单需要你编写流程的每一部分，对于复杂的状态，这将变得很困难。因此，我个人的意见是使用或覆盖大部分功能。

---

在您的情况下，我假设您希望发送整个状态以获取方法。以下是您使用Formik库实现的代码示例。

使用plain React创建表单需要您编写流程的每个部分，对于复杂的状态，这将变得很难。因此，我个人的意见是使用或在它们涵盖大部分功能时使用。

---

在您的情况下，我假设您希望将整个状态发送到fetch方法。下面是一个使用Formik库实现的代码示例。

输入行是什么意思？有具体的示例吗？类似于您希望将整个状态传递到fetch方法还是只发送

sendeEmail

？输入行是什么意思？有具体的示例吗您想传递整个状态以获取方法还是只发送邮件？好的，我可以在列表中添加更多行，但发送时得到500行（内部服务器错误）服务器与PostManiner一起工作服务器错误来自后端api，请检查您的api或将其作为问题放在此处。好的，我可以在列表中添加更多行，但当我发送它时，我得到一个500（内部服务器错误），服务器与PostManiner一起工作服务器错误来自后端api，请检查您的api或将其作为问题放在此处。