时间戳

首页 > 解决方案 > 从行中删除下拉列表和文本字段会删除 ReactJS 中状态更改的不正确字段

javascript - 从行中删除下拉列表和文本字段会删除 ReactJS 中状态更改的不正确字段

问题描述

我有一行包含一个 React-Select Dropdown 和一个输入字段。我正在尝试按其索引删除特定行。我在我的处理函数中传递索引，并希望从行中删除这两个字段。输入字段已正确删除，但下拉值未从同一行中删除，它会从最后一个索引中删除下拉列表。

我在这个处理程序中的索引的帮助下删除了行

按索引删除行：

handleRemoveSocial(idx) {
    let someArray = this.state.SocialData;
    someArray.splice(idx, 1);
    this.setState({ SocialData: someArray });
  }

我在 map 方法的帮助下渲染 Select Dropdown 和 Textbox，映射到我所在州的数组。现在，当我删除文本框时，如何从同一行映射 Select 下拉值。我在这篇文章中包含了沙盒链接。

{this.state.SocialData.map((Social, idx) => (
            <div className="form-group" key={idx}>
              <label htmlFor={"socialprofile"} className="control-label">
                Social profile
              </label>
              <div className="form-input-container select-social-link">
                <Select
                  data-id={idx}
                  className="profile-module-select-container"
                  classNamePrefix="profile-module-select"
                  options={options}
                  onChange={(selected) => {
                    this.handleSocialNameChange(selected.value, idx);
                  }}
                  onMenuOpen={() => {
                    this.setState({
                      selectMenuOpen: true
                    });
                  }}
                  onMenuClose={() => {
                    this.setState({
                      selectMenuOpen: false
                    });
                  }}
                  components={{
                    IndicatorSeparator: () => null
                  }}
                  placeholder={"Select"}
                  isSearchable={false}
                  isClearable={false}
                />
              </div>
              <div className="form-input-container input-social-link">
                <input
                  type="text"
                  id={`${SocialData[idx].socialname}-${idx}`}
                  className="social-form-control"
                  placeholder={`Social Url - ${Social.socialname}`}
                  value={SocialData[idx].name}
                  onChange={(e) =>
                    this.handleInputVlaueChange(e.target.value, idx)
                  }
                />

沙盒

标签： javascriptreactjsreact-select

解决方案

这是在此处触发事件handleSocialNameChange()时在 Handler中发生问题的地方。change

onChange={(selected) => {
   this.handleSocialNameChange(selected.value, idx);
}}

使用索引作为 id 总体上不是一个好主意。因为他们后来把事情搞砸了，我们还必须在代码中添加额外的逻辑。

我们可以有效地为我们的 ID使用uuid()库或技巧。new Date().getTime().toString()

CODESANDBOX Link的工作代码：

https://codesandbox.io/s/reasontosmile-n6ww4?file=/src/App.js

享受 ：）

推荐阅读