Reduxのアドフォーム
ブログは、対応するデータを示した上で、参照Reduxのクイックスタートは、このセクションでは、フォームを使用してデータを追加します。
1、コンポーネントの新しいPostFrom.js
- コンテンツを追加し、対応するコンストラクタ
- 見せたい、App.jsに導入する必要がある、とdiv要素で使用されます
コードの表示
//PostFrom.js
import React, {Component} from 'react';
class PostForm extends Component {
constructor(props){
super(props);
this.state = {
}
}
render() {
return (
添加内容
);
}
}
export default PostForm;
//App.js
······
import PostForm from "./components/PostForm";
······
{/*使用 */}
{/*使用 */}
図2に示すように、バックPostForm.jsコード書面
- イベントを追加、フォームタグ内のdivを追加、onSubmit検証方法
- 追加のdivの内側に形成するために続けて、書き込み2つのラベル、1つのGeのボタン
- 対応する状態、結合事象は、結合値の結合
- このイベントへのバインド
- Writeメソッドは、単に追加します
コードの表示
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 (
添加内容
);
}
}
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)) //打印日志
}
- 通常のデータを取得するには：
