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

Question

我想通过单击按钮添加一些输入行并将其添加到状态，以便我可以将其发送到服务器，但我不确定如何将其添加到 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>
          );
      }
}

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

我想我可以映射它，但我仍然不确定如何做到这一点

Answer 1

使用简单的 React 创建表单需要您编写流程的每个部分，对于复杂的状态，它变得很困难。所以，我个人的意见是使用 Formik 或 React Hook Form，因为它们涵盖了大部分功能。
在你的情况下，我假设你想发送整个状态来获取方法。这里是你的代码的example，它是用 Formik 库实现的。