时间戳

首页 > 解决方案 > 编辑 div 内容未按预期工作 React

javascript - 编辑 div 内容未按预期工作 React

问题描述

反应代码

class LoginIdCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      website: "",
      username: "",
      password: "",
      editMode: false,
    };
  }
  handleEdit = (fieldName, val) => {
    this.setState({
      [fieldName]: val,
    });
  };
  creatLoginCardItem() {
    const { logins } = this.props;
    const { editMode } = this.state;

    return logins.map((logins) => {
      return (
        <div className="card">
          <button onClick={() => this.handleEdit("editMode", true)}>
            edit
          </button>
          <p>{logins.website}</p>
          <p>{logins.username}</p>
          <p>{logins.password}</p>
        </div>
      );
    });
  }
  render() {
    const { editMode } = this.state;
    return <>{editMode ? <input /> : this.creatLoginCardItem()}</>;
  }
}

export default LoginIdCard;

i.stack.imgur.com/CKXXb.png

代码片段将卡片组件呈现为： web-app rendering

我想要的是当我单击编辑按钮时，div 内容显示是可编辑的，使用表单输入。但是只要我点击编辑按钮，所有的卡片都会被一个表格替换。我想单独编辑每张卡片并将它们保存到存储

标签： javascripthtmlcssnode.jsreactjs

解决方案

你的逻辑并不完全正确。您必须分别为每张登录卡设置状态。这并不难。

  1. 您需要创建一个新组件 LoginCardItem ，其中包含您现在使用的所有状态逻辑。（例如：this.state.editMode，...）

  2. 将您当前的 LoginIdCard 更改为 LoginCardOverview 之类的内容。为了表明这是一个概述。

  3. 在 LoginCardOverview 中，您可以遍历这些登录。

返回 logins.map((login) => < LoginCardItem />)

这样每个 LoginCardItem 都会有它自己的状态。

之后更改输入值：您必须像这样更改输入的状态：

<input onChange={(e) => this.setState({name: e.target.value})} />

推荐阅读