Внутри класса Worker оно доступно как
this.props.id
Если индекс нужен только внутри какого-либо метода, то можно его передавать туда в качестве аргумента.
Внутри метода App.prototype.render все индексы могут быть получены так:
list.map(v => v.props.children.props.id)
Но это убийственный способ! Лучше хранить ссылку на все экземпляры Worker, тогда его свойства будут доступны проще.
Пример переведён в cтандартный синтаксис ECMA-262, дабы можно было здесь запустить.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<script>
const { createElement, Component } = React;
class Worker extends Component {
render() {
return createElement("div", {},
createElement("div", {}, `${this.props.name} ${this.props.surname}`),
createElement("input", {
value: this.props.zp,
onChange: this.props.onChange
}),
createElement("input", {
value: this.props.days,
onChange: this.props.onChange
}),
createElement("div", {}, this.props.fullZp)
)
}
}
class App extends Component {
constructor() {
super()
this.state = {
worker: [
"Petr Petrov 23 150",
"Ivan Ivanov 40 100",
"Stepan Stepanov 3 200"
]
}
this.workers = [];
}
calcZp(index) {
// метод внутри которого хочется получить id
console.log("calcZp", index, this.workers[index]);
}
render() {
this.workers = this.state.worker.map((item, index) => {
let arr = item.split(" ")
let fullZp = arr[2] * arr[3]
return createElement(Worker, {
name: arr[0],
surname: arr[1],
days: arr[2],
zp: arr[3],
fullZp,
id: index,
onChange: this.calcZp.bind(this, index)
})
})
let list = this.workers.map(worker => createElement("li", {}, worker));
console.log(list.map(v => v.props.children.props.id));
return createElement("div", {},
createElement("ul", {}, list)
)
}
}
ReactDOM.render(createElement(App), document.getElementById("app"));
</script>
</body>
</html>
Сообщение от ArtyomZaitsev
|
|
event.target.id не помогает
|
event.target в примере попадает на input это экземпляр класса HTMLInputElement, который наследует от HTMLElement, который наследует от Element, который наследует от Node, который наследует от EventTarget и который наконец наследует от Object...
а <Worker /> в JSX, если это перевести в JavaScript будет
React.createElement(Worker, {});
и это экземпляр вашего собственного класса Worker, который наследует от React.Component и который наследует от Object
Как вы понинаете, у event.target не может быть id от Worker...
Когда вы написали <Worker id={index} /> в JSX, то это тоже самое, что
React.createElement(Worker, { id: index });
