ボタンをクリックするたびに、投稿が作成されて表示されます
しかし、入力データは表示されません
import React, { Component } from 'react'
export default class App extends Component {
state = {
dataArr : [],
isClicked: false,
title : '',
img : ''
}
handleSubmit = (e) => {
e.preventDefault()
}
handleChange = (e) => {
[e.target.name] = e.target.value
}
handleClick = () => {
const copyDataArr = Object.assign([], this.state.dataArr)
copyDataArr.push({
title : this.state.title,
img : this.state.img
})
this.setState({
isClicked : true,
dataArr : copyDataArr
})
}
render() {
console.log(this.state.title)
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" name="title" placeholder="Title.." onChange={this.handleChange}/>
<input type="text" name="img" placeholder="Image.." onChange={this.handleChange}/>
<button onClick={this.handleClick}>SUBMIT</button>
</form>
{ this.state.isClicked ?
this.state.dataArr.map(
(post, index) => {
return(
<div class="div">
<h1>title: {post.title}</h1>
<img src={post.img} alt="ohno"/>
</div>
)
}
)
: null }
</div>
)
}
}
状態で空の配列を作成し、配列をコピーして入力値をプッシュしました。私は何が間違っているのですか？
onChangeが機能し、入力データが表示される必要があります
反応でフォームを学習しようとしています。誰かが助けてくれることを願っています
あなたのhandleChange関数は、入力に入力したデータと状態を更新されていません。電話をかけるのを忘れたようthis.setState()です。これを試して ：
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
また、ここに動作するコードを含むサンドボックスがあります：https：//codesandbox.io/s/distracted-darkness-xp3nu
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加