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

Question

一旦我单击按钮以增加，输入增加一秒钟，然后返回到之前的值

它在 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,
  …
    }
}

为什么我不能用按钮增加/减少输入值

提前致谢

拉斐尔

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]

我不知道我能不能看到它，但我正在给你寄样品！ 样本