在特定索引处更改 React 状态数组

Question

如标题所示，我正在尝试将我的 state object 中的一个数组作为目标，但如果您曾经尝试过，您可能会猜到。这并不像听起来那么简单。我在这里查看了几个问题 ( and )，但都没有解决我的问题。

我需要的是针对 noteData 数组中的特定索引，并根据用户在 <TextArea /> 组件中输入的内容更新它。不完全确定为什么，但我的 noteData 数组只是读取为带有空字符串 noteData = [''].

的数组

如果您需要更多 in-depth 外观，可以转至 https://stackblitz.com/edit/note-taking 并分叉该页面并自行编辑。文件结构至少可以说是愚蠢的。开始用redux，中途决定不用。

TextArea 的状态和功能

class NoteList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      noteName: [],
      noteData: [],
      selectedNote: []
    }
}

  handleInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });
  }

  addNoteFunc(e) {
    this.setState({
      noteName: [ ...this.state.noteName, e.target.value ],
      noteData: [ ...this.state.noteData, '' ]
    });
  }

 // everytime the user types, change the value of noteData
  handleNoteData(e, index = this.state.selectedNote[0]) {
    const copyNoteData = Object.assign({}, this.state);
    copyNoteData.noteData[index] = e.target.value;

    this.setState(copyNoteData);
  }

  handleSelectedNote(index) {
    this.setState({
      selectedNote: [ index ]
    });
  }

<textarea 
  value={this.state.noteData[this.state.selectedNote[0]]}
  handleNoteData={(e, index) => this.handleNoteData(e, index)}
/>

实际的 TextArea 组件

import React from 'react';

const TextArea = props => {
  return (
    <div className='textarea'>
      <textarea 
        value={props.value}
        onKeyDown={props.handleNoteData}
      />
    </div>
  );
}

export default TextArea;

Answer 1

你的代码有错误，因为 textarea 不是正确的组件，它应该是 TextArea 而不是 textarea，它是一个 html 元素，你首先必须先将它导入 notelist.js, 这就是为什么没有设置 onKeyDown 属性的原因。

<TextArea 
   value={this.state.noteData[this.state.selectedNote[0]]}
   handleNoteData={(e, index) => this.handleNoteData(e, index = this.state.selectedNote[0])}
/>

此外，您必须将 handleNoteData 添加到 onChange 事件，否则在 onKeyDown 事件中，texarea 值将永远不会改变，因为您每次都将其重置为 e.target.value。

试试这个： https://stackblitz.com/edit/note-taking-y5hwsb?file=containers/notelist.js

在特定索引处更改 React 状态数组

Changing React State Array at Specific Index

javascript

arrays

object

setstate

reactjs

TextArea 的状态和功能

实际的 TextArea 组件