Значение формы ввода остается неизменным даже с обработчиком onChange - PullRequest
Новая
       20

Значение формы ввода остается неизменным даже с обработчиком onChange

0 голосов
/ 06 августа 2020

Этот код является функциональным компонентом, который должен отображать страницу сведений о пользователе (представление подробных сведений) ИЛИ форму для редактирования (представление сведений о редактировании) этой информации о пользователе в зависимости от состояния isUpdate . Это работает нормально, поскольку кнопки update и save изменяют состояние isUpdate для рендеринга Edit View или Show View соответственно.

Когда я выбираю пользователя, страница получает указанного c пользователя с помощью match.params.id который тоже работает. Моя проблема в том, что для isUpdate установлено значение true (отображается форма редактирования с исходными значениями данных пользователя). ожидайте, что входные значения изменяются, когда я набираю входные данные для, но вместо этого значение остается таким же, как его исходное значение (невозможно ввести новые значения). Я не знаю, почему я столкнулся с этой проблемой.

Код компонента UserDetail ниже: 

import React, {Fragment, useEffect, useState} from 'react';
import { connect }                            from 'react-redux';
import { findUser }                           from '../../actions/user';

const UserDetails =({match, user, loading, findUser}) => {
    
    const[isUpdate, setIsUpdate]=useState(false);
    
    //fetching user info based on the params id
        useEffect(() => {
    findUser(match.params.id);
    
    },[])
    
    //setting the initial state of user to  the values from the fetched data
    const[userData, setUserData]=useState({
        name: user.name,
        email: user.email,
    });
    
    //on Change handler
      const onChange = e =>{
          setUserData({...userData, [e.target.name]:e.target.value})
      }
      
      //User detail rendered to be viewed or edited
    return loading  ? 
        (<Fragment>
            <div className="loader-container" ></div>
                   <div className="loader"></div>  
        </Fragment>) :
    
        (isUpdate ? (
    
         <Fragment> 
            <div className="detail-container">
                
              <form>
                  
                <div className="form-row">  
                  <div className="form-group col-md-6">
                      <label htmlFor="name">Full Name:</label>
                      <input
                          type="name"
                          className="form-control"
                          id="name"
                          name="name"
                          value={user.name}
                          onChange={e=>onChange(e)}/>
                  </div>
                  <div className="form-group col-md-6">
                      <label htmlFor="email">Email:</label>
                      <input
                          type="email" 
                          className="form-control" 
                          id="email"
                          name="email"
                          value={user.email}
                          onChange={e=>onChange(e)}/>
                  </div>
                  </div>
                  <button type="submit" className="btn btn-primary" onClick={()=>setIsUpdate(false)}>SAVE</button>
                </form>
                
            </div>
        </Fragment>):
         (<Fragment>
            <div className="detail-container">
                
                <div className="d-flex justify-content-end mb-20"> <button className="btn btn-warning "
                        onClick={()=>setIsUpdate(true)}> UPDATE</button>
                </div>
                
                <div className="row mb-10">
                   <div className=" col-md-6">
                        <div className="detail-label">Full Name:</div>
                        <div className="detail">{`${user.name}`}</div>
                    </div>
                    <div className=" col-md-6">
                        <div className="detail-label">Email:</div>
                        <div className="detail">{`${user.email}`}</div>
                     </div>
                </div>
            </div>
</Fragment>))


const mapStateToProps = (state) => ({
    user: state.user.a_user,
    loading: state.user.loading
})

export default connect(mapStateToProps,{findUser})(UserDetails);

Пожалуйста, я был бы признателен, если бы кто-нибудь указал мне в правильном направлении.

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Данные user остаются постоянными во время сеанса редактирования, поэтому элемент input не может работать должным образом. Попробуйте изменить его объявление, используя вместо этого userData: 

                  <input
                      type="name"
                      className="form-control"
                      id="name"
                      name="name"
                      value={userData.name}
                      onChange={e=>onChange(e)}/>

UPDATE: чтобы обновлять состояние userData всякий раз, когда изменяется user, вы можете использовать этот трюк: 

const[userData, setUserData]=useState();

useEffect(
    () => {
        setUserData({
            name: user.name,
            email: user.email,
        });
    },
    [user]
);

Позаботьтесь о том, чтобы обработать начальное условие, где userData не определено.

0 голосов
/ 06 августа 2020
  1. Значения входных данных вашей формы должны быть нацелены на userData, а не на пользователя, т.е. 
<input 
    ...name="name"
    value={userData.name} />
Вам нужно установить свои userData в методе useEffect, поскольку кажется, что для каждого пользователя значение userData использует значения, полученные ранее. 
     useEffect(() => {
    findUser(match.params.id)
    setUserData(user)
    },[])

Я предполагаю, что метод findUser обновляется пользователь в родительском компоненте. Это должно работать.

...