Question

我试图创建一个用户可以编辑提交值的功能。所以要完全清楚：

您可以输入一些文字
点击提交，该值将被推送到数组
您将能够在dom上看到您的价值
如果您犯了错误，可以单击该输入并更改该值，同时更新已推送数组中该值的状态。
点击按钮，您将更新状态并拥有新编辑的值。

我坚持改变数组中推送项的值的状态。

例如：

如果我点击“Bob＆＃39;”的字段，编辑它并单击“提交”，我将其更改为的值也将更改我的数组中最初的状态为新值。

这是我到目前为止所做的：

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

React - 提交后更新输入值

1 个答案: