Question

我想在输入框的当前值后附加状态的前值 但是当我使用 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作为参数< / p>

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

Event polling

示例

null

您也不想附加到先前的输入状态，因为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

Answer 2

您实际上不需要执行prev.currentInput+e.target.value，因为e.target.value将是当前输入值...如果您在输入中输入alpha，则它的实际值为{{1} }，而我的猜测是您期望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

setState（）不采用其他参数（e）来更改值

2 个答案: