反應表單：輸入數據不會顯示

Question

每次我單擊按鈕時都會創建並顯示一個帖子

但輸入數據沒有顯示

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 工作和輸入數據顯示

嘗試在 React 中學習表單。 希望有人能幫忙

Answer 1

您的handleChange函數不會使用您輸入到輸入中的數據更新狀態。 看起來您可能忘記調用this.setState() 。 嘗試這個 ：

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

這里還有一個帶有工作代碼的沙箱： https : //codesandbox.io/s/distracted-darkness-xp3nu

Answer 2

您必須向輸入標記添加值屬性並傳遞狀態值。

<input type="text" name="title" value={this.state.title}  placeholder="Title.." onChange={this.handleChange}/>

您的句柄更改功能應如下所示

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