PHP를 사용하여 react j에서 동적 폼 제출하기

Question

현재 상황 : ReactJS를 사용하여 만든 동적 폼이 있으므로 폼의 일부를 추가/삭제할 수 있고 거기에 얼마나 많은 부품이 있는지 예측할 수 없습니다 있다. 양식은 여러 부분으로 구성되어 있기 때문에 (divs) 여러 입력을 포함하므로 입력을하지 말고 부분을 말합니다. 모든 사업부에는 동일한 목적을위한 입력 금액이 포함되어 있습니다 (아래 예 참조).

이제 양식을 제출해야합니다. 이전 자바 스크립트를 사용하여 응용 프로그램을 만들 때 간단히 입력 값을 PHP 파일에 제출하고 (메서드와 액션을 양식으로 선언 한 후) 데이터를 XML 또는 JSON 파일에 저장했습니다 (지금까지는 나는 아주 작은 규모의 응용 프로그램을 만들었으므로 충분했습니다.) 동적 양식을 제출하는 것은 매우 쉬운 방법이며이 양식에 대해 동일한 방법을 사용하려고했지만 작동하지 않았습니다. 그래서 같은 그 요청 내의 데이터를 내가 JS 양식 반응을위한 방법 아약스 - 요청에 대한 읽었지만 내가 본 모든 예제에서, 그들은 모두 선언 : 나는 그에서 일하는 것이라고 생각하지 않습니다

data: { 
    “form_name”: this.state.contactName, 
    “form_email”: this.state.contactEmail, 
    “form_msg”: this.state.contactMessage 
}, 

내 예를 들어 입력 양을 예측할 수 없기 때문입니다. 하나의 div의 렌더링

어린이 : 구성 요소 : 여기

내 코드의 일부입니다

export default class FormPart extends React.Component { 

render() { 
    return(
     <div className="formpart"> 
      <label>Title</label> 
      <input type="text" placeholder={this.props.header} /> 
      <textarea className="content" placeholder={this.props.content}></textarea> 
      <DeleteButton onClick={this.handleClick}/> 
      </div> 
     </div> 
    ); 
} 
} 

동적 기능 아이들을 렌더링하고 추가

부모 요소 :

function createData(header, content) { 
    id += 1; 
    return {header, content, id}; 
} 

class ExampleForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.addItem = this.addItem.bind(this); 
    this.state = { 
     data : [ 
      createData(Header1, Content1), 
      createData(Header2, Content2), 
      createData(Header3, Content3), 
      ], 
     newdata : createData("Enter a title", "Enter some content"), 
    } 
} 

addItem() { 
    this.state.data.push(this.state.newdata); 
    this.setState(this.state); 
    this.state 
} 

deleteClick(n) { 
    for(var i=0; i<this.state.data.length; i++) { 
     if(this.state.data[i] === n) { 
      delete this.state.data[i] 
     } 
    } 
    this.setState({ 
     data: this.state.data 
    }); 
} 

handleSubmit() { 
    alert("I don't know what to do"); 
} 

render() { 
    let { data }= this.state; 
    return( 
     <form> 
      {data.map((n, v) => { 
       return(
       <Part key={"item_" + v} handledClick={this.deleteClick.bind(this, n)} header={n.header} content={n.content} /> 
       ); 
      })} 
      <AddButton addElement={this.addItem}/> 
      </form> 
    ); 
} 

을 나는 이것을 어디서부터 시작해야할지 정말로 모른다. 나는 데이터 배열의 상태에 새로운 입력을 저장하는 방법을 찾았다면 아약스 요청을 사용하여 해당 배열을 저장할 수 있다고 생각했다. 그러나 어떻게해야 좋은지 알 수 없었다. 해. 놀랍게도, 저는 광산과 비슷한 질문이나 블로그 게시물 등을 거의 찾지 못했지만이 주제가 더 큰 주제라고 생각한다고해도 거의 도움이되지 않았습니다.

어쨌든 요약 해 보겠습니다. 기술적으로는 이전처럼 양식을 제출할 수 있습니까? 당신이 "좋은"해결책이나 나쁜 습관이 되겠습니까? 다른 방법이 있습니까?

Answer 1

물론 아약스에서이 양식을 제출해야합니다. https://stackoverflow.com/a/44277888/6578201