setState() 不接受进一步的参数 (e) 来改变值

Question

我想把输入框的当前值附加到state的上一个值 但是当我使用 setState 函数时，它以某种方式不允许将事件作为参数传递。

问题: setState(prev,props,e) setState 函数未检测到第三个参数 (e)。

e.target.value 未定义

这是我的代码：

import React , {Component} from 'react'
class Todo extends Component{
    constructor(){
        super()
        this.state={toDo:[],currentInput:"name"}
        // bind the events
        this.addItem=this.addItem.bind(this)
        this.changeList=this.changeList.bind(this)


    }

    addItem(e){
        // prevent default 
        e.preventDefault();

        // this part is left
    }
    changeList(e){


        this.setState(function (prev,props,e){
            console.log(prev.currentInput)
            return {currentInput:prev.currentInput+e.target.value} // this part is causing problem
        })
    }


    render(){
        return(
            <div className="App">
               <h1>Add your tasks</h1> 
            <form onSubmit={this.addItem}>
                <input type="text" value={this.state.currentInput} onChange={this.changeList} ></input>
                <input type="submit"></input>

            </form>
                <div className="List">
                    <h3>Remaining items:-</h3>
                    <ul>

                    </ul>
                </div>
            </div>
        )
    }


}

export default Todo

Answer 1

那不是 setState 的工作方式，你不能传递额外的参数，如果你传递一个函数，React 将调用它传递当前的 state 和 props 作为参数

值得一提的是，如果您使用功能更新，则必须在调用 setState 或调用 event.persist() 之前捕获输入值，因为 React 将在调用处理程序后清除事件设置 event.target 到 null

Event polling

示例

changeList(e){
  const { value } = e.target
  // or call e.persist() and use e.target.value inside the function

  // now it's safe to use a functional update
  this.setState(prevState => ({ 
    currentInput: prevState.currentInput + value 
  }))
}

您也不想追加到先前的输入状态，因为 e.target.value 包含完整的输入值，因此您可以将一个对象传递到 setState

changeList(e){
  this.setState({ currentInput: e.target.value })
}

Answer 2

你实际上不需要做 prev.currentInput+e.target.value 因为 e.target.value 将是当前输入值...如果你在输入中键入 alpha 它实际上会评估为 namenamealpha 而我的猜测是你期待 namealpha

但如果你仍然想让它工作，你应该怎么做

import React , {Component} from 'react'
class Todo extends Component{
    constructor(){
        super()
        this.state={toDo:[],currentInput:"name"}
    }

    addItem = (e) => {
        e.preventDefault();
    }

    changeList = (e) => {
      const newValue = e.target.value;
      this.setState((state) => {
        console.log({state, newValue})
        return({
          currentInput: state.currentInput + newValue
        })
      });
    }


    render(){
        return(
            <div className="App">
               <h1>Add your tasks</h1> 
            <form onSubmit={this.addItem}>
                <input type="text" value={this.state.currentInput} onChange={this.changeList} ></input>
                <input type="submit"></input>

            </form>
                <div className="List">
                    <h3>Remaining items:-</h3>
                    <ul>

                    </ul>
                </div>
            </div>
        )
    }


}

export default Todo

或者，理想情况下，您也可以使用这样的钩子

import React , { useState }from 'react'
const Todo = () => {
    const [currentInput, setCurrentInput] = useState('name');

        return(
            <div className="App">
               <h1>Add your tasks</h1> 
            <form onSubmit={() => console.log('submit')}>
                <input type="text" value={currentInput} onChange={(e) => setCurrentInput(e.target.value)} ></input>
                <input type="submit"></input>

            </form>
                <div className="List">
                    <h3>Remaining items:-</h3>
                    <ul>

                    </ul>
                </div>
            </div>
        )
}

export default Todo

setState() 不接受进一步的参数 (e) 来改变值

setState() not taking further argument (e) for changing value

javascript

setstate

reactjs