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}，这样，我可以更改值，但是例如，如果我不想更改它，程序会将其保存为空。

Answer 1

从道具到州设置性别。输入值与props的输入值不同，因为它在状态下设置为''；

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

并将您的输入更改为

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

Answer 2

尝试以下工作示例：

class Form extends React.Component {
    state = {
        data: {
            username: this.props.usernameProfile,
            age: '',
            gender: '',
            location: '',
            zipcode: '',
            faculty: '',
            yearOfFaculty: '',
            userID: this.props.userid

        },
        loading: false,
        errors: {}
    };
    
    onChange = (e) => {
     const updatedState = {
        ...this.state,
        data: {
        ...this.state.data,
        [e.target.name]: e.target.value,
        }
     }
     this.setState(updatedState);
     console.log('state',this.state);

    }

    render() {
        return (<div>
            <label>Gender:</label>
            <input 
                type="text" 
                onChange={this.onChange} 
                name="gender" 
            />
            
            <p>preview: {this.state.data.gender}</p>
            </div>)
    }
}
ReactDOM.render(<Form />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

<div id="root"></app>

如何输入字段

2 个答案: