Commit 5edca4d

committed

child event bubbled - post request

1 parent e9564f4 commit 5edca4dCopy full SHA for 5edca4d

File tree

+48

-7

lines changed

+48

-7

lines changed

Lines changed: 1 addition & 0 deletions

Lines changed: 11 additions & 7 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`import React from 'react';`
`2`	`2`
	`3`	`+import UserForm from './UserForm';`
	`4`	`+`
`3`	`5`	`class FileContent extends React.Component {`
`4`	`6`
`5`	`7`	`constructor(props) {`
`@@ -35,24 +37,25 @@ class FileContent extends React.Component {`
`35`	`37`	`});`
`36`	`38`	`}`
`37`	`39`
`38`		`- makeUser(e) {`
	`40`	`+ makeUser(data) {`
	`41`	`+ console.log("Sending data")`
	`42`	`+ console.log(data);`
`39`	`43`	`fetch('http://localhost:9000/api/files',`
`40`	`44`	`{`
`41`	`45`	`method: 'POST',`
`42`	`46`	`mode: 'cors',`
`43`	`47`	`headers: {`
`44`	`48`	`'Content-Type': 'application/json'`
`45`	`49`	`},`
`46`		`- body: JSON.stringify({`
`47`		`- name: e.target.value`
`48`		`- })`
	`50`	`+ body: JSON.stringify(data)`
`49`	`51`	`})`
`50`	`52`	`.then((response) => {`
`51`	`53`	`console.log(response);`
`52`	`54`	`})`
`53`	`55`	`.catch((error) => {`
`54`	`56`	`console.log(error);`
`55`		`- });`
	`57`	`+ }`
	`58`	`+ );`
`56`	`59`	`}`
`57`	`60`
`58`	`61`	`// componentDidMount() {`
`@@ -64,10 +67,11 @@ class FileContent extends React.Component {`
`64`	`67`	`<div>`
`65`	`68`	`<button onClick={this.makeApiCall}> Call API </button>`
`66`	`69`	`<p>{this.state.content}</p>`
`67`		`- <form>`
	`70`	`+ <UserForm submitPropagator={this.makeUser} />`
	`71`	`+ {/* <form>`
`68`	`72`	`<input type="text" placeholder="Name" />`
`69`	`73`	`</form>`
`70`		`- <button onClick={this.makeUser} value="Ben">Create User</button>`
	`74`	`+ <button onClick={this.makeUser} value="Ben">Create User</button> */}`
`71`	`75`	`</div>`
`72`	`76`	`);`
`73`	`77`	`}`

Lines changed: 36 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,36 @@`
	`1`	`+import React from 'react';`
	`2`	`+`
	`3`	`+class UserForm extends React.Component {`
	`4`	`+`
	`5`	`+ constructor(props) {`
	`6`	`+ super(props);`
	`7`	`+ this.state = {};`
	`8`	`+ this.prepareSubmit = this.prepareSubmit.bind(this);`
	`9`	`+ }`
	`10`	`+`
	`11`	`+ prepareSubmit(e) {`
	`12`	`+ e.preventDefault();`
	`13`	`+ var data = {};`
	`14`	`+ console.log("HERE");`
	`15`	`+ console.log(e.target.parentNode.children.length);`
	`16`	`+ for (var node of e.target.parentNode.children) {`
	`17`	`+ if (node.name) {`
	`18`	`+ data[node.name] = node.value;`
	`19`	`+ }`
	`20`	`+ }`
	`21`	`+ this.props.submitPropagator(data);`
	`22`	`+ }`
	`23`	`+`
	`24`	`+ render() {`
	`25`	`+ return (`
	`26`	`+ <form>`
	`27`	`+ <input type="text" placeholder="Name" name="name" />`
	`28`	`+ <input type="text" placeholder="Username" name="username" />`
	`29`	`+ <input type="password" placeholder="Password" name="password" />`
	`30`	`+ <button onClick={this.prepareSubmit}>Create User</button>`
	`31`	`+ </form>`
	`32`	`+ );`
	`33`	`+ }`
	`34`	`+}`
	`35`	`+`
	`36`	`+export default UserForm;`

Comments

(0)