[英]How to access more than one element of Dom in react using React.createRef()
我知道如何使用 React.createRef() 訪問 dom 的單個元素。但我想使用 createRef 訪問兩個不同的元素。 我在stackoverflow上看到了一些用於動態訪問多個元素但無法理解的示例。我在這里附上了我想更改按鈕span標簽onClick的背景顏色的簡單代碼。 我跟着這個反應文檔。 有人可以指導我,我在這里做錯了什么。
class TodoApp extends React.Component {
constructor(props) {
super(props)
// this.myRef = React.createRef();
this.textInput = null;
this.state = {
fname:""
}
}
setTextInputRef = element => {
console.log("element",element);
this.textInput = element;
};
green = () =>{
console.log("green ",this.textInput);
/* this.textInput.current.style.backgroundColor = "green"; */
this.textInput.style.backgroundColor = "green";
}
red = () =>{
console.log("red ",this.textInput);
/* this.textInput.current.style.backgroundColor = "red"; */
this.textInput.style.backgroundColor = "red";
}
render() {
return (
<div>
{/*
<span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
<span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/>
*/}
<span id="green" ref={this.setTextInputRef}>Green</span><br/>
<span id="red" ref={this.setTextInputRef}>Red</span><br/>
<button onClick={this.green}>For Green</button><br/>
<button onClick={this.red}>For Red</button><br/>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
在上面的代碼中,如果用戶單擊 btn,則應更改相應的跨度顏色。
任何幫助將不勝感激。
如果呈現的元素是 static 並使用this.myRef.current
訪問元素,則可以在構造函數中創建多個引用
您的 createRef 代碼如下所示
import React from "react";
import "./styles.css";
export default class TodoApp extends React.Component {
constructor(props) {
super(props);
this.greenInputRef = React.createRef();
this.redInputRef = React.createRef();
this.state = {
fname: ""
};
}
green = () => {
console.log("green ", this.textInput);
/* this.textInput.current.style.backgroundColor = "green"; */
this.greenInputRef.current.style.backgroundColor = "green";
};
red = () => {
console.log("red ", this.textInput);
/* this.textInput.current.style.backgroundColor = "red"; */
this.redInputRef.current.style.backgroundColor = "red";
};
render() {
return (
<div>
{/*
<span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
<span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/>
*/}
<span id="green" ref={this.greenInputRef}>
Green
</span>
<br />
<span id="red" ref={this.redInputRef}>
Red
</span>
<br />
<button onClick={this.green}>For Green</button>
<br />
<button onClick={this.red}>For Red</button>
<br />
</div>
);
}
}
如果您通過循環來動態呈現代碼片段,則可以通過以下方式創建 ref
constructor(props) {
super(props);
props.data.forEach(item => {
this[`dataRef${item.id}] = React.createRef();
})
}
...
render() {
return (
<div>
{
data.map(item =>
<p ref={this[`dataRef{item.id}]}>{item.name}</p>
)
}
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.