我有一个映射对象并动态返回项目列表的函数。现在,我希望访问该元素的每个列表的inputRef以应用某些效果,但它仅应用于最后一个和当前元素,而不应用于呈现的项目
这是渲染功能:
renderSortByOptions() => {
return Object.keys(this.sortByOptions).map((sortByOption) => {
let sortByOptionValue = this.sortByOptions[sortByOption];
return (
<li
className={this.getSortByClass(sortByOptionValue)}
key={sortByOptionValue}
ref={this.inputRef} // <====
onClick={this.handleSortByChange.bind(this, sortByOptionValue)}
>
{sortByOption}
</li>
);
});
};
引用像这样在componentDidUpdate上发生:
componentDidUpdate();
{
if (this.state.showMenu === true) {
let words = ["viejos", "nuevos", "menor", "mayor"];
words.forEach((item, i) => {
this.styleWord(this.inputRef.current, item);
});
}
}
这只是styleWord函数:
styleWord(target, word) {
let html = target.innerHTML;
html = html.replace(new RegExp(word, "g"), "<i>" + word + "</i>");
target.innerHTML = html;
};
您需要InputRefArrary用于保存引用。这是一个例子。请检查。
import React from "react";
export default class MultipleTextField extends React.Component {
constructor(props) {
super(props);
this.inputArr = ["name", "age", "gender"];
this.inputRefArr = [this.inputArr.length];
this.inputArr.map((input, index) => {
this.inputRefArr[index] = React.createRef();
});
this.state = {values: [this.inputArr.length]};
this.inputRef = React.createRef();
}
onChange = (event, index) => {
// 1. Make a shallow copy of the values
let values = [...this.state.values];
values[index] = event.target.value;
this.setState({values}, () => {
console.log(values, 'values')
});
};
clickHandler = (event) => {
this.inputArr.map((input, index) => {
alert(`${input} is ${this.state.values[index]}`)
})
};
render() {
return (
<form>
{
this.inputArr.map((input, index) => {
return (
<div key={index}>
<label key={index}>
{input}
<input key={index} ref={this.inputRefArr[index]} id="message" type="text"
value={this.state.values[index]}
onChange={(event) => this.onChange(event, index)}/>
</label>
</div>
);
})
}
<input type="button" value="Click Me" onClick={this.clickHandler}/>
</form>
);
}
}