下面是我寫的代碼,但是它只能highlight search 到的數組裏面的第一個COMPONENT 的TEXT,請問下如何HIGHLIGHT數組裏面兩個相同的TEXT?
<div id="app2"></div>
<script type="text/babel">
class MyApp extends React.Component {
constructor() {
super();
this.state = {
inputValue: "",
fields: [<Ta />,<Ta1 />]
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let object = this.refs.Progress1;
let fields12 = this.state.fields;
let searchBarText = e.target.value;
let divText = object.textContent;
let idx = divText.indexOf(searchBarText);
if (idx >= 0) {
let newText = [divText.substring(0, idx),
<strong>{divText.substring(idx, idx + searchBarText.length)}</strong>, divText.substring(idx + searchBarText.length)];
this.setState({ inputValue: searchBarText, fields:newText});
} else {
this.setState({ inputValue: searchBarText, fields: fields});
}
}
render() {
return (
<div>
<input
type="text"
className="input"
onChange={this.handleChange}
placeholder="Search..."
/>
<p ref="Progress1" id="try">
<p>{this.state.fields}</p>
</p>
<p ref="Progress2">
<p>{this.state.fields1}</p>
</p>
</div>
);
}
}
class Ta extends React.Component {
render() {
return <p >this is a dog</p>;
}
}
class Ta1 extends React.Component {
render() {
return <p>this is another dog</p>;
}
}
ReactDOM.render(<MyApp />, document.getElementById("app2"));
</script>
<style>
strong
{
color:red;
}
</style>