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才能工作，并且需要显示输入数据

尝试学习反应形式。希望有人能帮忙

Answer 1

您必须将value属性添加到输入标签并传递状态值。

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

Answer 2

您的handleChange函数未使用您输入的数据更新状态。尝试这个：

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

反应形式：输入数据不会显示

2 个答案: