Как получить реквизиты из события onChange()?

Я передал функцию onChange в компонент реакции вместе с другим реквизитом. В функции onChange мне нужно получить свойство, которое я передал компоненту. Как я могу это сделать? Я думаю об использовании event.target, но не знаю, возвращаются ли реквизиты из event.target.

Задний план: Я пытаюсь создать базовую доску идей и сейчас просто хочу создать несколько текстовых полей для ввода на основе массива в файле. Компонент Idea представляет одну идею и имеет две области ввода текста.

function Idea(props){
    return(
        <div>
            <p>Date: {props.date}</p>
            <input 
                type = "text"
                value = {props.title}
                name = "title"
                placeholder = "title"
                onChange = {props.handleChangeEvent}
                />

            <textarea
                type = "text"
                value = {props.content}
                name = "content"
                placeholder = "content"
                onChange = {props.handleChangeEvent}
                />
        </div>)}

Родительский компонент Ideas хранит в виде массива объектов в состоянии содержимое текстовых полей. Каждый элемент в массиве представляет собой объект, представляющий данные одного компонента Idea и хранящий дату, заголовок и содержимое.

import ideasData from "./ideasData
class Ideas extends Component{
    constructor() {
        super()
        this.state = {
            ideas : ideasData
        }
        this.handleChangeEvent = this.handleChangeEvent.bind(this)
    }

Функция в Ideas, handleChangeEvent передается в качестве реквизита каждому визуализируемому Idea компоненту. Он обновляет массив, хранящийся в состоянии Ideas. Например, если я набрал «вещи» в текстовом поле «заголовок» третьей идеи, то ideas[2].title должен стать «вещами». Однако для этого мне нужно получить опору "index" из компонента, иначе он не будет знать, какой элемент массива в состоянии следует обновить. «Индекс» — это реквизит, передаваемый каждому компоненту Idea.

    handleChangeEvent(event) {
        const {name,value} = event.target
        let index = ????????
        let curIdeas = this.state.ideas
        curIdeas[index][name] = value
        this.setState(curIdeas)
    }
this.props Думаю, это то, что вам нужно?
Daniel A. White 06.06.2019 15:37

у тебя тоже 2 handleChangeEvent?

Daniel A. White 06.06.2019 15:38

@DanielA.White handleChangeEvent является частью родительского компонента Ideas и выполняет setState для идей и привязан к идеям. Поэтому я не думаю, что this.props сработает. Я думаю, что смогу получить его из event.target? Я обновлю свой вопрос.

Lahel Light 06.06.2019 15:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
1 960
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

При рендеринге Idea вам нужно передать индекс в качестве реквизита.

this.state.ideas.map((idea, i) = > <Idea {...idea} index = {i} />

Затем внутри Idea вы вызываете handleChangeEvent с помощью index, исходящего из реквизита.

onChange = {(e) => props.handleChangeEvent(e, this.props.index}

И получить index в handleChangeEvent

handleChangeEvent(event, index) {
    const {name,value} = event.target
    let index = index
    let curIdeas = this.state.ideas
    curIdeas[index][name] = value
    this.setState(curIdeas)
}

Спасибо! Это сработало! Итак, я могу просто добавить дополнительные параметры после события в onChange, onClick и т. д.?

Lahel Light 06.06.2019 15:53

@LahelLight, если вы передадите анонимную функцию, да. Но не делайте этого onChange = {props.handleChangeEvent(e, index)} это вызовет большие проблемы

Vencovsky 06.06.2019 15:54

Другие вопросы по теме