React Доступ к значению из массива

У меня есть форма в React, которая динамически добавляет новые элементы ввода. Кажется, это работает нормально, но я не могу получить доступ к входным значениям, как показано на этом снимке экрана...

Я пробовал следующее

console.info(это.состояние.телефон.имя)

а также...

console.info(this.state.telephone.tidx.name)

где tidx — уникальный ключ.

Вот конструктор...

 constructor() {
        super();
        this.state = {
            role: "Installer",
            name: "",
            telephoneType: [{ name: "" }],
            telephone: [{ name: "" }],
            tidx: "",
            emailType: [{ email: "" }],
            email: [{ email: "" }],
            eidx: "",
            notes: ""
        };
    }

и это моя функция для обработки форм ввода...

handleTelephoneChange = tidx => evt => {

        const newTelephone = this.state.telephone.map((telephone, tsidx) => {

            if (tidx !== tsidx) return telephone;
            return { ...telephone, name: evt.target.value };
        });
        this.setState({ telephone: newTelephone }, () => {
            // get state on callback
            console.info(this.state)
            console.info(this.state.telephone.name)
            console.info(this.state.telephone.tidx.name)
        }
        );
    };

а отрисовано вот так...

{this.state.telephone.map((telephone, tidx) => (
<MDBRow key = {tidx} className = "grey-text flex-nowrap align-items-center no-gutters my-2">
<MDBCol md = "12">
<input value = {telephone.name} onChange = {this.handleTelephoneChange(tidx)}placeholder = {`Telephone No. #${tidx + 1}`} className = "form-control"/>
</MDBCol>
    </MDBRow>
     ))}

Любые советы очень ценятся, так как я новичок в формах в React. Спасибо.

arrays reactjs forms input jsx

28.06.2019 12:19

Структурированный массив Numpy

Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...

3 эффективных способа найти максимальное значение в массивах JavaScript

T - 1Bits: Генерация последовательного массива

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

Что такое деструктуризация массива в JavaScript?

Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

telephone — это массив, поэтому вы должны использовать обозначение индекса.

  console.info(this.state.telephone[tidx].name)

Чтобы отобразить соответствующий тип телефона для каждого телефона:

{this.state.telephone.map((telephone, tidx) => (
     <MDBRow key = {tidx} className = "grey-text flex-nowrap align-items-center no-gutters my-2">
        <MDBCol md = "12">
            <input value = {this.state.telephoneType[tidx].yourValue} onChange = {this.defineYourTelephoneTypeEventHandler(tidx)}/>
            <input value = {telephone.name} onChange = {this.handleTelephoneChange(tidx)}placeholder = {`Telephone No. #${tidx + 1}`} className = "form-control"/>
        </MDBCol>
      </MDBRow>
 ))}

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

— 28.06.2019 12:39

@StevenCollins очень рад, что первая часть сработала для вас. Интересно, а у вас не возникло проблем с пользовательским интерфейсом в исходном коде?

— 28.06.2019 12:40

все верно, раньше все работало. вот короткое видео с моим оригинальным обработчиком событий screencast.com/t/pQOPVLff

— 28.06.2019 12:45

Я надеюсь, вы не возражаете против еще одного быстрого вопроса, связанного с моим постом, который меня беспокоил. У меня есть другое поле ввода под названием TelephoneType. Возможно ли сделать что-то подобное или они должны быть разделены? {this.state.telephone.map((телефон, tidx, phoneType, ttidx) => ()}

— 28.06.2019 12:59

@StevenCollins, вы не можете сделать это в своем существующем this.state.telephone.map(), эта функция строго следует этой структуре аргументов. array.map((item, index, ownArray)) поэтому вы не сможете напрямую нацеливаться на другой массив. Однако, если мы предположим, что порядок элементов в telephone arr соответствует тому же порядку элементов в telephoneType, вы можете просто использовать индекс предоставленного первого массива, чтобы получить значение второго массива. Точно так же вы бы использовали обозначение индекса :)... В противном случае вы можете просто использовать второй .map()

— 28.06.2019 13:05

Телефон и TelephoneType должны быть возвращены вместе для каждой строки, если это имеет смысл. screencast.com/t/CN3EssEK0p Возможно, мне придется открыть для этого новый пост..

— 28.06.2019 13:06

Я пытался использовать отдельный .map(), но это нарушало пользовательский интерфейс. Я попробую еще раз. Спасибо.

— 28.06.2019 13:09

См. мое обновленное решение выше, также обратите внимание, что вам также необходимо создать обработчик событий для типа телефона.

— 28.06.2019 13:10

да, у меня уже есть это, но так как это выбор/раскрывающийся список, это немного сложнее screencast.com/t/InaZf0CgWs Мне нравится вызов, ха-ха

— 28.06.2019 13:14

Наконец-то я заработал с вашим обновленным кодом выше. Спасибо. screencast.com/t/D2KQ8iIDsy

— 18.07.2019 13:12

28.06.2019 12:25