Javascript 当我尝试在表单字段中键入内容时，它不会'；别让我打字

我需要在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>
        )
    }

---

您应该使用react状态控制输入表单值，在react中称为“受控组件”。因此，请检查updateField函数并确保它更改状态值。

---

我建议使用

formik

超级简单、功能强大。问题在于你的

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 })
    }