Невозможно получить данные поля формы в React с использованием пользовательского интерфейса материала

Question

У меня есть форма реакции, с которой я пытаюсь использовать компонент Material UI <Input />, но он выходит из системы undefined и не может получить значения поля формы при отправке. Использование обычного <input> поля формы работает просто отлично. Чего мне не хватает, что не позволяет мне использовать компонент MUI <Input />? Я думаю, что это может быть связано с использованием ref={(a) => this._inputElement = a}, но не уверен в альтернативе.

class Contacts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };

    this.addContact = this.addContact.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
  }

  addContact(e) {
    if(this._inputElement.value !== "") {
      var newItem = {
        firstname: this._inputElement.value,
        lastname: this._inputElement2.value,
        phone: this._inputElement3.value,
        key: Date.now()
      };

      this.setState((prevState) => {
        return {
          items: prevState.items.concat(newItem)
        };
      });

      this._inputElement.value = "";
      this._inputElement2.value = "";
      this._inputElement3.value = "";
    }
    console.log(this.state.items);
    e.preventDefault();
  }
  deleteItem(key) {
    var filteredItems = this.state.items.filter(function (item) {
      return (item.key !== key);
    });

    this.setState({
      items: filteredItems
    });
  }
  render () {
    return (
        <Tabs onChange={this.onChange} defaultSelectedIndex={0} justified={true}>
          <Tab value="pane-1" label="Add Contact" onActive={this.onActive}>
            <Panel>
              <Form onSubmit={this.addContact}>
                <Input ref={(a) => this._inputElement = a}
                        label="First Name" required={true} floatingLabel={true}/>
                <Input ref={(a) => this._inputElement2 = a}
                        label="Last Name" required={true} floatingLabel={true}/>
                <Input ref={(a) => this._inputElement3 = a}
                        label="Phone Number" type="number" required={true} floatingLabel={true}/>
                <Button variant="raised">Add</Button>
              </Form>
            </Panel>
          </Tab>
          <Tab value="pane-2" label="List Contacts">
          <Panel>
            <ContactList entries={this.state.items} delete={this.deleteItem}/>
            </Panel>
          </Tab>
        </Tabs>
    );
  }
}

export default Contacts

Answer 1

Чего вам не хватает, так это значения и onChange реквизита на вашем входе. Значение входа контролируется государством. Это рабочий пример, который даст вам результат, который вы ищете:

class Contacts extends Component {
constructor(props) {
    super(props)

    this.state = {
        items: []
    }

    this.addContact = this.addContact.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
}

addContact(e) {
    //e.preventDefault should always be the first thing in the function
    e.preventDefault()

    //use state to access form values

    var newItem = {
        firstname: this.state.firstname,
        lastname: this.state.lastname,
        phone: this.state.phone,
        key: Date.now()
    }
    //add newItem to items
    let holder = this.state.items
    holder.push(newItem)
    this.setState({items: holder})
    //reset form to blank values
    this.setState({ firstname: '', lastName: '', phone: '' })
    console.log(this.state.items)
}

deleteItem(key) {
    var filteredItems = this.state.items.filter(function(item) {
        return item.key !== key
    })

    this.setState({
        items: filteredItems
    })
}

//arrow functions automatically bind to this
handleChange = e => {
    //destructuring to get the variables
    let { name, value } = e.target
    //setting state whith the value of "name" as the key
    this.setState({ [name]: value })
}

render() {
    return (
        <Tabs onChange={this.onChange} defaultSelectedIndex={0} justified={true}>
            <Tab value="pane-1" label="Add Contact" onActive={this.onActive}>
                <Panel>
                    <Form onSubmit={this.addContact}>
                        <Input
                            value={this.state.firstname}
                            name="firstname"
                            onChange={this.handleChange}
                            label="First Name"
                            required={true}
                            floatingLabel={true}
                        />
                        <Input
                            value={this.state.lastname}
                            name="lastname"
                            onChange={this.handleChange}
                            label="Last Name"
                            required={true}
                            floatingLabel={true}
                        />
                        <Input
                            value={this.state.phone}
                            name="phone"
                            onChange={this.handleChange}
                            label="Phone Number"
                            type="number"
                            required={true}
                            floatingLabel={true}
                        />
                        <Button variant="raised">Add</Button>
                    </Form>
                </Panel>
            </Tab>
            <Tab value="pane-2" label="List Contacts">
                <Panel>
                    <ContactList entries={this.state.items} delete={this.deleteItem} />
                </Panel>
            </Tab>
        </Tabs>
    )
}

}

экспорт по умолчанию Контакты

Answer 2

Я обновил ваш код и удалил реф. Поэтому я создал handleChange, который сохраняет входные значения в состояние, к которому вы можете получить доступ, и помещает его в массив элементов

class Contacts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.addContact = this.addContact.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  //Saves the user input into the state
  handleChange(e) {
    const {
      name,
      value
    } = e.target;
    if(value !== ""){
      this.setState({
        [name]: value
      })
    }
    
  }
  addContact(e) {
    //Now you have access to firstname, lastname, phone in the state
      var newItem = {
        firstname: this.state.firstname,
        lastname: this.state.lastname,
        phone: this.state.phone,
        key: Date.now()
      };
      this.setState((prevState) => {
        return {
          items: prevState.items.concat(newItem),
         //reset the form after submission
          firstname: "",
          lastname: "",
          phone: ""
        };
      });
    }
    console.log(this.state.items);
    e.preventDefault();
  }
  deleteItem(key) {
    var filteredItems = this.state.items.filter(function(item) {
      return (item.key !== key);
    });
    this.setState({
      items: filteredItems
    });
  }
  render() {
    return ( <
      Tabs onChange = {
        this.onChange
      }
      defaultSelectedIndex = {
        0
      }
      justified = {
        true
      } >
      <
      Tab value = "pane-1"
      label = "Add Contact"
      onActive = {
        this.onActive
      } >
      <
      Panel >
      <
      Form onSubmit = {
        this.addContact
      } >
      <
      Input name = "firstname"
      value={this.state.firstname}
      onChange = {
        this.handleChange
      }
      label = "First Name"
      required = {
        true
      }
      floatingLabel = {
        true
      }
      /> <
      Input name = "lastname"
      value={this.state.lastname}
      onChange = {
        this.handleChange
      }
      label = "Last Name"
      required = {
        true
      }
      floatingLabel = {
        true
      }
      /> <
      Input name = "phone
      value={this.state.phone}
      onChange = {
        this.handleChange
      }
      label = "Phone Number"
      type = "number"
      required = {
        true
      }
      floatingLabel = {
        true
      }
      /> <
      Button variant = "raised" > Add < /Button> < /
      Form > <
      /Panel> < /
      Tab > <
      Tab value = "pane-2"
      label = "List Contacts" >
      <
      Panel >
      <
      ContactList entries = {
        this.state.items
      }
      delete = {
        this.deleteItem
      }
      /> < /
      Panel > <
      /Tab> < /
      Tabs >
    );
  }
}
export default Contacts