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

Question

反应代码

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

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

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

Answer 1

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

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

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

3. 在 LoginCardOverview 中，您可以循环访问这些登录信息。

return logins.map((login) => )

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

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

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