javascript - 如何制作输入框

Question

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

这就是输入的样子。

   </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>

onChange函数是这样的:

onChange = e =>
        this.setState({
          data: { ...this.state.data, [e.target.name]: e.target.value }

        });

state = {
       data: {
         username:this.props.usernameProfile,
         age:'',
         gendre:'',
         location:'',
         zipcode:'',
         faculty:'',
         yearOfFaculty:'',
         userID: this.props.userid



       },
       loading: false,
       errors: {}
     };

在性别输入中，它显示“男”(这来自服务器)，但如果我想更改它不会让我。

我也尝试写 value={this.state.gender} -> placeholder={this.state.gender} 这样，我可以更改值，但例如，如果我不想更改它，程序会将其保存为 null。

Answer 1

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

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

并将您的输入更改为

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