使用按钮增加表单的输入值（React Forms）不起作用

Question

一旦我点击按钮递增，输入递增一秒钟，然后returns到它以前的值

它在 React 组件的表单内，我在组件状态中保存输入值

                <form className={style.createActivity} onSubmit={this.handleSubmit}>
                …
                <div className={style.inputDifficulty}>
                    <input className={this.state.difficultyError && style.danger} 
                        type="text" 
                        name="difficulty" 
                        value={this.state.difficulty} 
                        readOnly
                        />
                    <button name="difficulty" onClick={this.handleUpClick}>&#x2B06;</button>      // Up arrow
                    <button name="difficulty" onClick={this.handleDownClick}>&#x2B07;</button>>   // Down arrow
                </div>
                …
                <input className={style.submit} type="submit" name="" value="Submit"/>
            </form>

点击手柄是

handleUpClick = (e) => {
    this.setState({
        ...this.state, 
        [e.target.name]: this.state[e.target.name] + 1
    })
}

handleDownClick = (e) => {
    this.setState({
        ...this.state, 
        [e.target.name]: this.state[e.target.name] - 1
    })
}

状态为：

    constructor() {
    super()
    this.state={
        name: '',
        difficulty: 1,
        duration: 1,
  …
    }
}

为什么我不能increment/decrement用按钮输入值

提前致谢

拉斐尔

Answer 1

根据您建议的代码，我建议的解决方案是这样的。

  e.preventDefault()

我认为按钮点击表单可以协同工作，因此通过将代码放在上面可以防止事件传播。因此，解决...

handleUpClick = (e) => {
    e.preventDefault()
    this.setState({
        [e.target.name]: this.state[e.target.name] + 1
    })
}

handleDownClick = (e) => {
    e.preventDefault()
    this.setState({
        [e.target.name]: this.state[e.target.name] - 1
    })
}

还有，这个不放也没关系。 [...this.state]

不知道能不能看到，我给你发样品了！ sample

使用按钮增加表单的输入值（React Forms）不起作用

incrementing a form's input value (React Forms) with a button doesn't work

javascript

database

reactjs

jsform

react-component