confirm that reply has been added to the array of data after handleNewsPuls onClick, but why didn"t render execute it?
import React, { PureComponent } from "react";
import { withRouter } from "react-router-dom";
import { Form, Input, Radio, Button } from "antd";
import "./style.less";
import WechatService from "services/wechat";
class KeyWordAdd extends PureComponent {
constructor(props) {
super(props);
this.state = {
radioValue: "a",
keyword: "",
reply: {},
title: "",
description: "",
picurl: "",
url: ""
};
}
handleOnChangeKeyWord(event) {
this.setState({
keyword: event.target.value
})
}
handleOnChange(e) {
var reply = {};
if (e.target.value == "news") {
reply.data = [];
}
this.setState({
reply: reply,
radioValue: e.target.value
})
}
handleOnChangeReply(key, event) {
var reply = this.state.reply;
this.setState({
[key]: event.target.value,
reply: Object.assign(reply, { [key]: event.target.value })
})
}
handleNewsPuls(event) {
event.stopPropagation();
var reply = this.state.reply;
var data = reply.data || [];
data.push({
title: "",
description: "",
picurl: "",
url: ""
});
this.setState({
reply: Object.assign(reply, { data: data }),
}, () => {
this.render();
})
}
handleSubmit() {
console.log(this.state.keyword);
WechatService.keywordCreate({
keyword: this.state.keyword,
keywordType: this.state.radioValue,
reply: this.state.reply
})
}
render() {
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const FormItemStyle = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
return (
<div style={{ width: 700 }}>
<Form>
<FormItem label={""} {...FormItemStyle}>
<Input type={"text"} placeholder="" value={this.state.keyword} onChange={this.handleOnChangeKeyWord.bind(this)} />
</FormItem>
<FormItem label={""} {...FormItemStyle}>
<RadioGroup onChange={this.handleOnChange.bind(this)} defaultValue="text">
<RadioButton value="text"></RadioButton>
<RadioButton value="url"></RadioButton>
<RadioButton value="b"></RadioButton>
<RadioButton value="c"></RadioButton>
<RadioButton value="d"></RadioButton>
<RadioButton value="e"></RadioButton>
<RadioButton value="news"></RadioButton>
</RadioGroup>
</FormItem>
<div className="keyword-edtior__content">
{
(() => {
switch (this.state.radioValue) {
case "text":
return (
<FormItem>
<Input type={"text"} placeholder={""} />
</FormItem>
);
break;
case "url":
return (
<FormItem>
<Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "url")} />
</FormItem>
)
break;
case "news":
return (
<div>
<Button onClick={this.handleNewsPuls.bind(this)}></Button>
{this.state.reply.data.map((e, i) => {
console.log(e);
return (
<div key={i}>
google
</div>
);
})}
{/* <FormItem>
<Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "title")} value={this.state.title} />
</FormItem>
<FormItem>
<Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "description")} value={this.state.description} />
</FormItem>
<FormItem>
<Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "picurl")} value={this.state.picurl} />
</FormItem>
<FormItem>
<Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "url")} value={this.state.url} />
</FormItem> */}
</div>
);
break;
}
})()
}
</div>
<div className="keyword-edtior__content">
<Button onClick={this.handleSubmit.bind(this)}></Button>
</div>
</Form>
</div>
)
}
}
export default withRouter(KeyWordAdd);