反应表单输入字段不会让我更改值[关闭]答案

【问题标题】：React form input field wont let me change value [closed]反应表单输入字段不会让我更改值[关闭]
【发布时间】：2020-08-03 17:52:28
【问题描述】：

所以我以前看过这个问题，但以前的答案都没有解决我的问题。我不明白为什么我的 React 不允许我更改输入框中的值。

状态最初应该由我后端的值设置，但当用户在输入框中键入值时应该更改状态。

提前致谢！

import React, { Component } from 'react'

class PRForm extends Component {

state = {
    pr: this.props.oneFish.pr
}

handleChange = (event) => {
    this.setState({
        [event.target.name]:event.target.value
    })
}

handleSubmit = (event) => {
    event.preventDefault();
    this.prBackend()
    this.prFrontend(event)
}

prFrontend = (event) => {
    this.setState({
        [event.target.name]:event.target.value
    })
}


prBackend = () => {
    this.props.oneFish.pr = this.state.pr
    fetch(`http://localhost:3000/fish/${this.props.oneFish.id}`, {
        method: 'PATCH',
        headers: {
            "Content-Type": "application/json"
            },
        body: JSON.stringify(this.props.oneFish)
        }) 
        console.log(this.props.oneFish.pr)
}

    render() {
        return (
            <div className='prForm'>
                <div>
                    <h3 className='PR'>Biggest Catch: {this.state.pr} in. </h3>
                </div>
                <form onSubmit={this.handleSubmit} className="addPRForm">
                    <h4 className="pr-title">BIGGEST CATCH</h4>
                    <input className="inputPR" type="text" name='pr' placeholder="0 in" value={this.state.pr} onChange={this.handleChange}/>
                    <input className="submitPR" type="submit" value="Submit Size" />
                </form>
            </div>
        )
    }
}

export default PRForm

【问题讨论】：

无法重现。你能打开一个代码沙盒项目来告诉我们这个问题吗？
我不知道你在问什么，但我在codesandbox上尝试了相同的代码，效果很好。这是它的链接，检查一下，让我知道我是否解决了您的问题。 sandbox 另外我建议您在使用表单时使用 react-hook-form。
嗯，这很奇怪....特别是因为这是一个我正在回顾的旧项目，当我将它推送到 github 时我知道它正在工作，但现在当我运行时我的程序我什至无法点击文本框。
原来我的 JS 很好，问题是在我的 CSS 上，表单位于 div 后面，我无法选择输入框。谢谢！

标签： reactjs forms input

【解决方案1】：

发生这种情况是因为 react 异步更新，所以当 react 想要更新 stateww 来解决这个问题时，事件可能会消失，只是为了将事件存储在变量中：

handleChange= (event) => {
const {name,value} = event.target
    this.setState({
        [name]:value
    })
}

【讨论】：

这似乎并没有改变我在文本输入框中单击的能力。不过谢谢！

【解决方案2】：

您将初始状态定义为类属性，因此this.state.pr 始终指向您的初始状态。将其移至构造函数：

constructor(props) {
   super(props)
   this.state = {
      pr: this.props.oneFish.pr
   }
}

编辑事实证明这不是真的。仍然会推荐它作为“良好做法”

【讨论】：