在特定指标下改变反应状态数组

Question

正如标题所暗示的那样，我正在尝试以State Object中的数组为目标，但如果您尝试过，您会猜到。这并不像听起来那么简单。我在这里看了几个问题（React：我如何更新setState上的state.item[1]？（使用JSFiddle）和数组中对象键的reactjs-setstate)，但这两个问题都没有解决我的问题。

我需要的是在notedata数组中指定一个特定的索引，并根据用户在</code组件中键入的任何内容更新它。不确定原因，但我的notedata数组只是读取为带有空字符串的数组notedata=['']。

如果需要更深入的查看，可以访问https://stackblitz.com/edit/note-taking并分叉页面，然后自己进行编辑。文件结构是愚蠢的，至少可以说。我开始使用redux并在中途决定反对它。

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)}
/>

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 props的原因。

<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