javascript - React - 提交后更新输入值

Question

我正在尝试制作一个用户可以编辑提交值的功能。所以要完全清楚:

1. 你会输入一些文字
2. 点击提交，该值将被推送到一个数组中
3. 您将能够在 dom 上看到您的值(value)
4. 如果您犯了错误，您可以点击该输入并更改值，同时更新已推送数组中该值的状态。
5. 单击按钮时，您将更新状态并获得新编辑的值。

我卡在更改数组中推送项的值状态的部分。

例如:

如果我单击“Bob”字段，对其进行编辑并单击提交，无论我将其更改为什么值，都会将数组中最初的状态更改为新值。

这是我目前所拥有的:

import React, { Component } from 'react'

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

    this.state = {
      notes: ['hello', 'bob'],
      val: ''
    }
  }

  submit = () => {
    const { notes, val } = this.state

    notes.push(val)
    this.setState({notes})
  }

  handleEdit = e => {
    console.log(e)
  }

  render() {
    return (
      <div>
        <input 
          type="text" 
          onChange={e => this.setState({val: e.target.value})}
        />

        <button onClick={this.submit}>Submit</button>

        {this.state.notes.map(item => {
          return (
           <form onSubmit={e => e.preventDefault()}>
             <input 
               type="text" 
               defaultValue={item}
               onChange={e => this.setState({val: e.target.value})}
             />
             <button onClick={() => this.handleEdit(item)}>Submit 
Change</button>
           </form>
          )
        })}
      </div>
    )
  }
}

Answer 1

尝试这种事情:

handleEdit = (item) => {
  const notes = this.state.notes.slice();
  const index = notes.indexOf(item);
  notes[index] = this.state.val;
  this.setState({
    notes
  })
}