Получить номер элемента после .map()
ДОбрый день, подскажите пожалуйста, есть ли адекватный способ получать порядковый номер, или заданный id, у компонента Worker после того, как создали и вывели из этих компонентов массив?
class Worker extends React.Component {
render() {
return <div>
<div>{this.props.name} {this.props.surname}</div>
<input value={this.props.zp} onChange={this.props.onChange}/>
<input value={this.props.days} onChange={this.props.onChange}/>
<div>{this.props.fullZp}</div>
</div>;
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
worker:['Petr Petrov 23 150', 'Ivan Ivanov 40 100', 'Stepan Stepanov 3 200']
};
}
calcZp=()=>{
// метод внутри которого хочется получить id
}
render() {
let list = this.state.worker.map((item, index)=>{
let arr = item.split(' ')
let fullZp = arr[2] * arr[3]
return <li><Worker
name={arr[0]}
surname={arr[1]}
days={arr[2]}
zp={arr[3]}
fullZp={fullZp}
id={index}
onChange={this.calcZp}
/></li>
})
return <div>
<ul>
{list}
</ul>
</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
event.target.id не помогает. Может я вообще пытаюсь все усложнить и так делать не стоит? |
Внутри класса 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>
Цитата:
а <Worker /> в JSX, если это перевести в JavaScript будет React.createElement(Worker, {}); и это экземпляр вашего собственного класса Worker, который наследует от React.Component и который наследует от Object Как вы понинаете, у event.target не может быть id от Worker... Когда вы написали <Worker id={index} /> в JSX, то это тоже самое, что React.createElement(Worker, { id: index }); |
Спасибо большое)
|
| Часовой пояс GMT +3, время: 08:33. |