Как сохранить ввод с инпута в state?

Question

[Mykhailo Nikolaiev]

Почему не сохраняет ввод с инпута в state?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import T from 'prop-types';

import { addContact } from '../../redux/Contacts/contactActions';

import styles from './Phonebook.module.css';
import inputPhoneId from '../../helpers/inputPhoneId';

class Phonebook extends Component {
  state = {
    contactName: '',
    contactNumber: '',
  };

  static propTypes = {
    onSubmit: T.func.isRequired,
  };

  handleChange = e => {
    const { value } = e.target;
    this.setState({ contactName: value, contactNumber: value });
  };

  handleSubmit = e => {
    const { name, number } = e.target;
    e.preventDefault();

    const { contactName, contactNumber } = this.state;
    const { onSubmit } = this.props;

    console.log(onSubmit(contactName, contactNumber));

    this.reset();

    name.value = '';
    number.value = '';
  };

  reset = () => {
    this.setState({
      contactName: '',
      contactNumber: '',
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit} className={styles.form}>
        <label htmlFor={inputPhoneId.name} className={styles.label}>
          Name
          <input
            type="text"
            name="name"
            placeholder="Enter contact name..."
            mask="[phone]"
            id={inputPhoneId.name}
            onChange={this.handleChange}
            className={styles.input}
          />
        </label>
        <br />
        <label htmlFor={inputPhoneId.number} className={styles.label}>
          Number
          <input
            type="text"
            name="number"
            placeholder="Enter contact number..."
            id={inputPhoneId.number}
            onChange={this.handleChange}
            className={styles.input}
          />
        </label>
        <br />

        <button type="submit" className={styles.btn}>
          Add contact
        </button>
      </form>
    );
  }
}

const mDTP = () => ({
  onSubmit: addContact,
});

export default connect(null, mDTP)(Phonebook);

Action:

export const addContact = (name, number) => ({
  type: ActionType.ADD_CONTACT,
  payload: { name, number, id: uuidv1() },
});

Reducer:

const contactsReducer = (state = [], { type, payload }) => {
  switch (type) {
    case ActionType.FETCH_CONTACTS:
      return payload;

    case ActionType.ADD_CONTACT:
      return [...state, payload];

    case ActionType.DELETE_CONTACT:
      return state.filter(item => item.id !== payload);

    default:
      return state;
  }
};

Comments

[Алексей Уколов]

Почему вы считаете, что он не сохраняется, как проверяете? Почему вы содержимое любого инпута при изменении записываете в оба поля state одновременно?

[Mykhailo Nikolaiev]

Алексей Уколов, нет re-rendera,оно висит у меня в payloade,а как добавить в state?