如何将文本输入中的对象添加到本机的数组中?

时间:2017-08-16 08:14:23

标签: reactjs react-native

我有一个像这样的对象数组:

const data = {
  0: {
    isEditing:false,
    text: 'Chloe',
  },
  1: {
   isEditing:false,
    text: 'Jasper',
  },
  2: {
    isEditing:false,
    text: 'Pepper',
  }};

我想为此创建一个add方法,但我不知道如何在下一个索引处插入该项。我无法更改数组的结构,因为我需要使用sortable-list库进行拖放。

这是我的代码:

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      inputValue: "",
      db: []
    };
    this.textChange = this.textChange.bind(this);
    this.addTask = this.addTask.bind(this);
  }

  textChange = value => {
    const inputValue = value;
    this.setState(() => ({
      inputValue
    }));
  };
  addTask = () => {
    if (!this.state.inputValue) {
      return;
    }
    //this.state.db.push({
     // isEditing:false,
    //  text: this.state.inputValue
   // });

    data.index = {
          isEditing:false,
          text: this.state.inputValue     
    }

    index++;

    this.setState({
      ...this.state,
      data:this.state.data,
      inputValue: ""
    });
    // rowsState - array: {text, isEditing}
  };


}

1 个答案:

答案 0 :(得分:0)

我找到了答案。

addTask = () => {
    if (!this.state.inputValue) {
      return;
    }

    let newData = {};

    let l = Object.keys(this.state.data).length;
    console.log("l=", l);
    let i = 0;
    for (i = 0; i < l; i++) {
      let el = this.state.data[i]; // i + ""
      newData[i] = el;
    }

    newData[l] = { text: this.state.inputValue, isEditing: false };

    this.setState({
      ...this.state,
      data: newData,
      inputValue: ""
    });
  };