Reactjs 单击两次时反应更新状态
由于react没有立即在console.log上更新状态，因此我必须单击提交按钮两次，以便console.log显示更新的状态 我查过了，但我认为这不是问题所在 正在进行演示，请查看控制台 这是我的 App.jsReactjs 单击两次时反应更新状态,reactjs,Reactjs,由于react没有立即在console.log上更新状态，因此我必须单击提交按钮两次，以便console.log显示更新的状态 我查过了，但我认为这不是问题所在 正在进行演示，请查看控制台 这是我的 App.js import React, {Component} from 'react'; import Navbar from './components/Navbar'; import {withStyles} from '@material-ui/core/styles'; import
import React, {Component} from 'react';
import Navbar from './components/Navbar';
import {withStyles} from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import {Typography, Button} from '@material-ui/core';
import Footer from './components/Footer';
import Emoji from './components/Emoji';
import TextField from '@material-ui/core/TextField';
import EmojiPicker from 'emoji-picker-react';
import JSEMOJI from 'emoji-js';
import Icon from '@material-ui/core/Icon';
let jsemoji = new JSEMOJI();
// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';
// some more settings...
jsemoji.supports_css = false;
jsemoji.allow_native = true;
jsemoji.replace_mode = 'unified'
const styles = theme => ({
shadows: ["none"],
spacing: 8,
root: {
flexGrow: 1,
minHeight: '800px',
width: '100%',
position: 'relative'
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'left',
width: '500px',
color: theme.palette.text.secondary
},
textField: {
width: '400px'
},
myitem: {
margin: '40px'
},
emoji: {
margin: '40px'
},
emojiButton: {
margin: '20px 0px'
},
cancel: {
margin: '20px 0px'
}
});
class App extends Component {
constructor(props) {
super(props);
this.state = {
emoji: '',
text: '',
items: [],
emojiToggle: false
}
}
onChange = (e) => {
e.preventDefault()
this.setState({text: e.target.value});
}
handleClick = (n, e) => {
let emoji = jsemoji.replace_colons(`:${e.name}:`);
this.setState({
text: this.state.text + emoji,
});
// console.log(this.state.items)
}
handleButton = (e) => {
e.preventDefault();
if(!this.state.emojiToggle){
this.setState({emojiToggle: true})
}
else{
this.setState({emojiToggle: false})
}
}
onSubmit = (e) => {
e.preventDefault();
this.setState({
text: this.state.text,
items: [this.state.text]
})
console.log(this.state.items) // have to click twice to see the updated state
}
render() {
const {classes} = this.props;
return (
<div className={classes.root}>
<Navbar/>
<Grid container spacing={12}>
<Grid item sm={6} className={classes.myitem}>
<Paper className={classes.paper}>
<Typography variant="h2" component="h2">
Insert An Emoji
</Typography>
{/* Begin Form */}
<form>
<TextField
id="standard-name"
label="Enter Something"
className={classes.textField}
value={this.state.text}
onChange={this.onChange}
margin="normal"
/>
{this.state.emojiToggle ? (
<div>
<EmojiPicker onEmojiClick={this.handleClick}/>
<Button
className={classes.cancel}
onClick={this.handleButton}
color="danger"
variant="outlined">
Close
</Button>
</div>
)
: (
<div>
<Button onClick={this.handleButton} color="primary" variant="outlined">
Show Emojis
</Button>
<Button onClick={this.onSubmit} style={{ marginLeft: '10px'}} color="primary" variant="outlined">
Submit
</Button>
</div>
)}
{/* End Form */}
</form>
</Paper>
</Grid>
</Grid>
<Footer/>
</div>
);
}
}
export default withStyles(styles)(App);
import React，{Component}来自'React'；
从“./components/Navbar”导入Navbar；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
从“/logo.svg”导入徽标；
从“@material ui/core”导入{排版，按钮}；
从“./components/Footer”导入页脚；
从“./components/Emoji”导入表情符号；
从“@material ui/core/TextField”导入TextField；
从“表情选择器反应”导入表情选择器；
从“表情符号js”导入JSEMOJI；
从“@material ui/core/Icon”导入图标；
让jsemoji=newjsemoji（）；
//将样式设置为emojione（默认-apple）
jsemoji.img_set='emojione'；
//设置所有表情符号的存储位置
jsemoji.img_sets.emojione.path=https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';
//更多设置。。。
jsemoji.supports_css=false；
jsemoji.allow_native=true；
jsemoji.replace_mode='unified'
常量样式=主题=>({
阴影：[“无”]，
间距：8，
根目录：{
flexGrow:1，
最小高度：“800px”，
宽度：“100%”，
位置：'相对'
},
论文：{
填充：theme.space.unit*2，
textAlign:'左'，
宽度：“500px”，
颜色：theme.palete.text.secondary
},
文本字段：{
宽度：“400px”
},
我的项目：{
利润率：“40px”
},
表情符号：{
利润率：“40px”
},
按钮：{
边距：“20px 0px”
},
取消：{
边距：“20px 0px”
}
});
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
表情符号：''，
文本：“”，
项目：[]，
emojiToggle:false
}
}
onChange=（e）=>{
e、 预防默认值（）
this.setState（{text:e.target.value}）；
}
handleClick=（n，e）=>{
让emoji=jsemoji.replace_冒号（`:${e.name}:`）；
这是我的国家({
text:this.state.text+emoji，
});
//console.log（this.state.items）
}
把手扣=（e）=>{
e、 预防默认值（）；
if（！this.state.emojiToggle）{
this.setState（{emojiToggle:true}）
}
否则{
this.setState（{emojiToggle:false}）
}
}
onSubmit=（e）=>{
e、 预防默认值（）；
这是我的国家({
text:this.state.text，
条目：[this.state.text]
})
console.log（this.state.items）//必须单击两次才能查看更新的状态
}
render（）{
const{classes}=this.props；
返回(
插入表情符号
{/*开始形式*/}
{this.state.emojiToggle(
接近
)
: (
显示表情符号
提交
)}
{/*结束形式*/}
);
}
}
导出默认样式（样式）（应用程序）；
setStateconsole.log（）setStatethis.setState({
text: this.state.text + emoji,
}, () => console.log(this.state.items));
控制台。logthis.setState({
text: this.state.text,
items: [this.state.text]
}, () => console.log(this.state.items));
这是预期的行为
console.log（）setState（）onSubmit = e => {
e.preventDefault();
this.setState(
{
text: this.state.text,
items: [this.state.text]
},
() => console.log(this.state.items)
);
};
哇，我真不敢相信我错过了。将在2分钟内接受