时间戳

首页 > 解决方案 > Reactjs 在我输入时复制表单输入内容

reactjs - Reactjs 在我输入时复制表单输入内容

问题描述

Reactjs 在我输入时复制表单输入内容

此代码显示三个输入表单。 我的问题是，当我输入第一个输入表单时，我看到我输入的内容也出现在第二个和第三个输入表单上。

请问如何分别在每个输入表单中保留键入的内容。

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class AutoComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
comment: '',
      data: [],
      shown: true,


    };
 this.handleChangeComment = this.handleChangeComment.bind(this);
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title" },
        { id: "2", title: "my second title" },
        { id: "3", title: "my third title" }
      ]
    });
  }





 handleChangeComment(event) {
const { name, value } = event.target;
this.setState({ [event.target.name]: event.target.value });
  }

 handleComment(id, comments) {
   alert('am id:' +id);
alert('am id:' +comments);
    }


  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
{post.id}----{post.title}

<textarea rows="2" cols="20" className="form-control img-rounded"  name="comment"  value={this.state.comment} onChange={this.handleChangeComment} placeholder="Write a Comment..">Write Comment</textarea>

<input type="button" value="comment"   onClick={() => this.handleComment(post.id, this.state.comment)}  />
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

标签： reactjs

解决方案

您已经创建了一个受控输入，但是，所有三个元素都引用相同的状态，因此为什么当您更改一个时，您将更改所有这些元素。

编辑：

这是一个代码示例：https ://jsfiddle.net/yegac34n/

<textarea rows="2" cols="20" className="form-control img-rounded"  name={`comment-${i}`}  value={this.state[`comment-${i}`]} onChange={this.handleChangeComment} placeholder="Write a Comment..">Write Comment</textarea>

推荐阅读