Reactjs 反应形式：输入数据赢得'；t显示

每次我点击按钮，就会创建并显示一篇文章

但是输入数据没有显示出来

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>
    )
  }
}

import React，{Component}来自“React”
导出默认类应用程序扩展组件{
状态={
数据阵列：[]，
isClicked:错，
标题：“”，
img:'
}
handleSubmit=（e）=>{
e、 预防默认值（）
}
handleChange=（e）=>{
[e.target.name]=e.target.value
}
handleClick=（）=>{
const copyDataArr=Object.assign（[]，this.state.dataArr）
copyDataArr.push({
标题：this.state.title，
img:this.state.img
})
这是我的国家({
是的，
dataArr:copyDataArr
})
}
render（）{
console.log（this.state.title）
返回(
提交
{this.state.isclick？
this.state.dataArr.map(
（职位、索引）=>{
返回(
标题：{post.title}
)
}
) 
：null}
)
}
}

在状态上创建了一个空数组，并复制该数组并推入输入值。我做错了什么

需要onChange才能工作，需要输入数据才能显示

---

尝试在react中学习表单。希望有人能提供帮助

您必须向输入标记添加值属性并传递状态值

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

---

您的

handleChange

功能未使用输入的数据更新状态。看起来您可能忘记调用

this.setState（）

。试试这个 :

---

这里还有一个沙盒，其工作代码为：

当我这样做时，我甚至无法再输入了？在做了令人印象深刻的推断之后，它不允许我输入输入。你在@Parsa上面发布的代码中似乎不是这样的。正如我所建议的，我可以通过调整

handleChange（）

来正确显示您的帖子。哦，我明白了问题所在，这太愚蠢了，我没有设置状态，谢谢你@帕萨你几乎让其他一切都运转正常，这是个好兆头。：）你还改变了什么吗？这样做对我的代码仍然不起作用，尽管您的沙盒代码工作得很好，但我更新了

handleChange

。这就是显示数据所需的全部内容。此外，我还使每个输入的

值

属性与状态中的一个字段匹配，这使得清除表单变得更容易，这是不必要的。除此之外没有。

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

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