Question

我的状态与此类似

this.state = {
      var: "",
      arr1: [{
        pName: "",
        priority: ""
      }],
      other: ["item1", "item2", "item3"]
    }

在我的render（）中，我列出了“其他”数组的内容，并且在该数组旁边，用户可以输入任何数字，这就是他们对项目中的项目的排名（与重复无关紧要）。 “其他数组，如下所示

  <Row className="App">
    <ul>
      {this.state.other.map((item, index) =>
        <li key={index}>{item}<Input className="rankCols" type="number" id="ranking" onChange={this.handleChange.bind(this)} /></li>
        )}
    </ul>
  </Row>

我想要实现的是将列表中的“ item”和匹配的“ rank”存储到“ arr1”中，以便如果用户将item1排名为“ 3”，则将item2排名为“ 1”和item3设为“ 2”，则将arr1更新为

arr1: [{
  pName: "item1",
  priority: "3"
  },
  {
  pName: "item2",
  priority: "1"
  },
  {
  pName: "item3",
  priority: "2"
  }]

handleChange（）用于更新用户输入的值

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

我不确定是否可以通过这种方式完成操作，或者我是否必须使用某种类型的循环来存储每个项目及其优先级。

Answer 1

首先，您需要查找项目优先级是否已存在于阵列中，如果存在，请对其进行更新，否则将其添加到阵列中。另外，您还需要提供要更新到handleChange的项目

   this.state = {
      var: "",
      arr1: [],
      other: ["item1", "item2", "item3"]
    }

  <Row className="App">
    <ul>
      {this.state.other.map((item, index) =>
        <li key={index}>{item}<Input className="rankCols" type="number" id="ranking" onChange={this.handleChange.bind(this, item)} /></li>
        )}
    </ul>
  </Row>

handleChange = (item,event) => {
    const value = event.target.value
    this.setState(prev => {
      const idx = prev.arr1.findIndex(obj => obj.pName === item)
      if(idx > -1) {
           return {
              arr1: [...prev.arr1.slice(0, idx), {pName: item, priority: value}, ...prev.arr1.slice(0, idx + 1)]
           }
      } else {
          return {
              arr1: prev.arr1.concat([{pName: item, priority: value}])
           }
      }

    }));
  }

如何将列表中的值存储到ReactJS中的对象数组中

1 个答案: