Я передал функцию 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)
}
у тебя тоже 2 handleChangeEvent?
@DanielA.White handleChangeEvent является частью родительского компонента Ideas и выполняет setState для идей и привязан к идеям. Поэтому я не думаю, что this.props сработает. Я думаю, что смогу получить его из event.target? Я обновлю свой вопрос.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


При рендеринге 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 и т. д.?
@LahelLight, если вы передадите анонимную функцию, да. Но не делайте этого onChange = {props.handleChangeEvent(e, index)} это вызовет большие проблемы
this.propsДумаю, это то, что вам нужно?