Javascript 如何创建输入字段

我想做一个“编辑配置文件页面”，我为此制作了表单，并请求服务器向我提供有关用户的所有信息。问题是该字段显示了有关用户的正确数据，但我无法修改数据以更新用户

这就是输入的样子

   </div> <div className="form-group"
   <label htmlFor="password">Gender</label>
   <input value={this.state.gender} 
           type="text" 
           name="gendre" 
           onChange={this.onChange} 
           className="form-control"  
           placeholder ={ this.props.gender} />
   </div>

在性别输入中，它显示“男性”（来自服务器），但如果我想更改，它不会允许我更改

---

我还尝试编写了

value={this.state.gender}

->

placeholder={this.state.gender}

，通过这种方式，我可以更改值，但例如，如果我不想更改它，程序会将其保存为null。

将性别从props设置为state。输入值与props中的值不同，因为它在状态下被设置为

'

state = {
 ...
 data: { gendre: this.props.gendre ...},
 ...
}

并将您的输入更改为

<input value={this.state.data.gender} 

---

尝试以下工作示例：


类表单扩展了React.Component{
状态={
数据：{
用户名：this.props.usernameProfile，
年龄：''，
性别：''，
位置：“”，
zipcode:“”，
教员：“，
农业年：''，
userID:this.props.userID
},
加载：false，
错误：{}
};
onChange=（e）=>{
常量updatedState={
…这个州，
数据：{
…此.state.data，
[e.target.name]：e.target.value，
}
}
this.setState（updatedState）；
console.log（'state'，this.state）；
}
render（）{
返回(
性别：
预览：{this.state.data.gender}

)
}
}
ReactDOM.render（，document.getElementById（'root'））

可能与您在name=“gendre”上的输入错误有关，它应该是name=“gender”，占位符不应该是动态的。请删除该逻辑。您正在使用状态作为值={this.state.gender}，但您已使用数据声明：{gender:'}@pageNotfoUnd。将
value
更改为
defaultValue
state = {
 ...
 data: { gendre: this.props.gendre ...},
 ...
}

<input value={this.state.data.gender}