Блог

Я столкнулся с проблемой при создании приложения CRUD , обновляя свои контактные данные , я могу поместить свои поля в форму , но после этого я не знаю, как подойти к кнопке отправки. крюк для локального хранилища : https://usehooks.com/useLocalStorage ,, пользовательский крючок, используемый для локального хранения

я могу отправить свои данные , и это создаст карточку контакта , но во время редактирования я обнаружил эту проблему, я нашел подход на youtube https://www.youtube.com/watch?v=HZkN0LfC5dM ::(11.27) , но я имитирую этот подход в функциональной основе

     import UseLocalStorage from '../hook/UseLocalStorage';
    import ContactData from './ContactData';

toast.configure();
export default function Form() {
    const [state, setState] = useState({
        act: 0,
        index: 0,
        name: '',
        email: '',
        phone: '',
    });
    const [datas, setData] = UseLocalStorage('users', []);

    const inputEl = useRef(null)
    

    const onChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;

        setState({
            ...state,
            [name]: value,
        });
    };

    const onSubmit = (e) => {
        e.preventDefault();
    

        // const { name, email, phone } = state;
        

        // if (name === '' || email === '' || phone === '') {
        //  toast.error('Please enter all fields',{autoClose: 5000});
        // } else {
        //  setData([...datas, state]);

        //  setState({
        //      name: '',
        //      email: '',
        //      phone: '',
        //  });
        // }

        let form = inputEl.current

        let dataArr = datas
        let name = form['name'].value
        let email = form['email'].value
        let phone = form['phone'].value

        if(state.act === 0){
            let data = {
                name,
                email,
                phone
            }
            dataArr.push(data)
        }else{
            let index = state.index
            dataArr[index].name =name
            dataArr[index].email = email
            dataArr[index].phone = phone
        }

        

    };

    const onEdit = (idx) => {
        const editData = datas[idx];
        
        const form = inputEl.current
        form['name'].value =  editData.name
        form['email'].value = editData.email
        form['phone'].value = editData.phone

        setState({
            act:1,
            index:idx
        })

        console.log(state)
    };

    const onDelete = (idx) => {
        const dataArray = datas;
        dataArray.splice(idx, 1);

        setData([...dataArray]);
    };


    return (
        <div className='app'>
            <div className='container'>
                <h2>React CRUD Application</h2>
                <form type='submit' onSubmit={onSubmit} className='form' id='form' ref={inputEl}>
                    <div className='form-control'>
                        <label>Name</label>
                        <input
                            type='text'
                            name='name'
                            value={state.name}
                            onChange={onChange}
                        />
                    </div>
                    <div className='form-control'>
                        <label>Email</label>
                        <input
                            type='email'
                            name='email'
                            value={state.email}
                            onChange={onChange}
                        />
                    </div>
                    <div className='form-control'>
                        <label>Phone</label>
                        <input
                            type='number'
                            name='phone'
                            value={state.phone}
                            onChange={onChange}
                        />
                    </div>

                    <button type='submit'>Submit </button>
                </form>
            </div>
            {datas !== [] ? (
                <div className='container__2'>
                    <ContactData datas={datas} onDelete={onDelete} onEdit={onEdit} />
                </div>
            ) : (
                <h3>No contacts to show</h3>
            )}
        </div>
    );
}