Как сделать поле ввода

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: {}
     };

На входе Gender отображается «Male» (это с сервера), но если я захочу изменить, он не даст мне.

Я также попытался написать вместо value={this.state.gender} -> placeholder={this.state.gender}, и таким образом я могу изменить значение, но, например, если я не хочу его менять, программа сохранит его как ноль.

Answer 1

Попробуйте приведенный ниже рабочий пример:

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>

Answer 2

установить пол из реквизита в состояние. Входное значение не совпадает со значением из реквизита, так как оно установлено на '' в состоянии;

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

И измените свой ввод на

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