当我尝试在表单字段中输入内容时，它不允许我输入任何内容答案

【问题标题】：when I try to type something in the form field, It doesn't let me type anything当我尝试在表单字段中输入内容时，它不允许我输入任何内容
【发布时间】：2020-12-21 12:29:42
【问题描述】：

我需要在 react.js 中创建一个表单，但是当我尝试在表单字段中输入内容时，它不允许我输入任何内容。我为我的表单的输入创建了一个函数。我究竟做错了什么？请帮我。谢谢。

renderInput(title, value, onChange, validateField, placeholder) {
        return (
            <div className="col-12 col-md-4">
                <div className="form-groud">
                <label>{title}</label>
                <input type="text" className="form-control"
                    name={title}
                    value={value}
                    onChange={e => onChange(e)}
                    onBlur={validateField}
                    placeholder={placeholder} />
                </div>
            </div>
        )
    }          

    renderForm() {
        return (
            <div className="form">            
                <div className="row">       
                    {this.renderInput("Avatar", this.state.member.avatar, e => this.updateField(e), this.validateField, "profile picture" )}                  
                    {this.renderInput("Name", this.state.member.name, e => this.updateField(e), this.validateField, "name" )}        
                    {this.renderInput("Email", this.state.member.email, e => this.updateField(e), this.validateField, "email" )}  
                    {this.renderInput("Project", this.state.member.project, e => this.updateField(e), this.validateField, "project" )}                        
                    {this.renderInput("Devices", this.state.member.devices, e => this.updateField(e), this.validateField, "devices" )}                        
                    {this.renderInput("MainStack", this.state.member.mainstack, e => this.updateField(e), this.validateField,"main stack" )}                
                </div>

                <hr />
                <div className="row">
                    <div className="col-12 d-flex justify-content-end">
                        <button className="btn btn-primary"
                            onClick={e => this.save(e)}>
                            Save
                        </button>
                        <button className="btn btn-secondary ml-2"
                            onClick={e => this.clear(e)}>
                            Cancel
                        </button>
                    </div>
                </div>                                
            </div>
        )
    }

我的 updateField 方法：

updateField (event) {
        const member = {...this.state.member}
        member[event.target.avatar] = event.target.value
        member[event.target.name] = event.target.value
        member[event.target.project] = event.target.value
        member[event.target.devices] = event.target.value
        member[event.target.mainstack] = event.target.value
        this.setState({ member })
    }

【问题讨论】：

我推荐使用formik 超级简单和强大。
问题是你的updateField方法；请将其添加到问题中。
我添加了我的 updateField。

标签： javascript reactjs function input

【解决方案1】：

你应该控制输入表单值的使用反应状态，在 React 中被称为“受控组件”。所以检查你的 updateField 函数并确保它改变了状态值。 https://reactjs.org/docs/forms.html

【讨论】：