拼接删除错误的索引

问题描述

所以我正在尝试构建一个动态文本字段，一切正常，但是我在从状态/数组中删除数据时遇到了问题。 splice 总是删除最后一个索引而不是自定义索引。这是我的整个代码。顺便说一下，我使用 reactjs 作为前端框架。

import React from 'react'

class Form extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            firstName: "",lastName: "",books: []
        }

        this.onSubmitHandle = this.onSubmitHandle.bind(this)
        this.onChangeHandle = this.onChangeHandle.bind(this)
    }

    onSubmitHandle = (event) => {
        event.preventDefault()
        console.log(this.state)
    }

    onChangeHandle = (event) => {
        event.preventDefault()

        if(["book"].includes(event.target.name)) {
            let books = [...this.state.books]
            books[event.target.dataset.id][event.target.name] = event.target.value
        } else {
            this.setState({
                [event.target.name]: event.target.value
            })
        }
    }

    addNewRow = () => {
        this.setState((prevstate) => ({
            books: [...prevstate.books,{ "book": "" }]
        }))
    }

    removeRow = (index) => {
    const newBooks = [...this.state.books];
    newBooks.splice(index,1)
    this.setState({books: newBooks})
    }
     
    
    render() {
        return(
            <div>
                <form onSubmit={this.onSubmitHandle}>
                    <input type="text" name="firstName" onChange={this.onChangeHandle} placeholder="First Name" />
                    <input type="text" name="lastName" onChange={this.onChangeHandle} placeholder="Last Name" />
                    <br></br>
                    {
                        this.state.books.map((val,i) => {
                            return(
                                <div key={i}>
                                    <input type="text" data-id={i} onChange={this.onChangeHandle} name="book" placeholder={i} />
                                    <button type="button" onClick={this.removeRow.bind(this,i)}>Remove {i}</button>
                                </div>
                            )
                        })
                    }
                    <br></br>
                    <button type="button" onClick={this.addNewRow.bind(this)}>Add</button>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default Form

解决方法

函数本身和拼接工作正常。您的问题与反应状态更新有关。

您的代码有几个问题。

首先，你只以一种方式绑定输入元素，所以如果有状态更新，它不会是被动的。此外，由于它的值不绑定到变量，如果元素数量发生变化，react 不会认为保持它处于活动状态。您可以在此处阅读有关密钥的更多信息：https://reactjs.org/docs/lists-and-keys.html

解决问题。将 value={val.book} 设置为输入元素。

如果您执行步骤 1 中建议的更改，您会发现您的代码存在另一个问题，即您的 onChangeHandle 函数有错误。基本上，您不会在这里更新状态，因为您只是更新对象的值。一般来说，我认为在使用 react 时避免这样的分配是明智的。尽可能尝试使用纯函数。无论如何，请尝试将更改处理程序更改为以下内容：

onChangeHandle = (event) => {
  event.preventDefault()
  
  if(event.target.name === 'book') {
    let books = [...this.state.books]
    books[event.target.dataset.id][event.target.name] = event.target.value
    this.setState({
        books,})
    return;
  }

  this.setState({
      [event.target.name]: event.target.value
  });

这将确保每当您更改输入值时状态都会更新，并且该值会正确反映在您的输入元素中。