Question

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

Answer 1

您已经创建了一个受控输入，但是，所有三个元素都引用相同的状态，因此，为什么要更改一个，就必须全部更改。

编辑：

这是一个代码示例：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>

Answer 2

这是因为所有文本区域的状态值都相同。你可以拥有

<textarea name={`comment${i}`}  value={this.state[`comment${i}`]}

或者您可以将状态变量comment作为数组，然后更新该数组的索引，该索引可以是

<textarea   value={this.state.comment[i]} onChange={(e) => handleChangeComment(e, i)}

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

2 个答案: