MVVM 框架 -- Redux 添加表单

Redux 添加表单

上一个博客已经展示了对应的数据，参考 Redux 快速入门，这一节会用一个表单添加数据。

1、在components下新建PostFrom.js

• 添加内容，以及对应的constructor
• 想要展示，就要引入到App.js，并在div里使用

查看代码

  
//PostFrom.js
import React, {Component} from 'react';
class PostForm extends Component {

constructor(props){

super(props);

this.state = {
}

}

render() {

return (

<div>

<h1> 添加内容</h1>

</div>

);

}

}
export default PostForm;
//App.js

······

import PostForm from "./components/PostForm";

······

<div>

<PostForm/> {/*使用 /}

<Posts/> {/使用 */}

</div>

2、回到PostForm.js代码，写表单

• div 里面添加 form 标签，添加事件，onSubmit 方法
• 继续在 form 里面添加div，写 2 个 label，1 个 button
• 绑定对应状态，绑定事件，绑定 value
• 给事件绑定this
• 写刚刚添加的方法

查看代码

  
import React, {Component} from 'react';
class PostForm extends Component {

constructor(props){

super(props);

this.state = {

//绑定对应状态

title:"",

body:""

}

//绑定this

this.onChange = this.onChange.bind(this);

this.onSubmit = this.onSubmit.bind(this);

}
//方法

onChange(e){

//方法里面空着的话，浏览器页面不能写入数据

this.setState({ [e.target.name]:e.target.value});

}
onSubmit(e){
}
render() {

return (

<div>

<h1>添加内容</h1>

<form onSubmit={this.onSubmit}>

<div>

<label>title </label> <br/>

<input type="text" name="title"

onChange={this.onChange}

value={this.state.title}/>

{/绑定事件、value/}

</div>

<div>

<label>body</label><br/>

<textarea name="body"

value={this.state.body}

onChange={this.onChange}>

</textarea>

</div> <br/>

<button type="submit">添加 </button>

</form>

</div>

);

}

}
export default PostForm;

3、

• 写 onSubmit 这部分
• 请求数据，并把表单中输入的内容放到数据里面去

查看代码

  
onSubmit(e){
        e.preventDefault(); //阻止默认事件
const post = { //拿到状态

title:this.state.title,

body:this.state.body

};
fetch("http://jsonplaceholder.typicode.com/posts",{

method:"POST",

headers:{

"content-type":"application/json"

},

body:JSON.stringify(post)

})

.then(res => res.json()) //成功的话，返回数据,并进行json解析

.then(data => console.log(data)) //打印日志

}

• 正常获取到数据：