英文:
How to get element of component without using listener such as onChange?
问题
I would presumably like to run the function auto_grow on useEffect but i require the element to be passed in to edit its values. Is there a way I can pass in the element without a listener so useEffect can make use of it?
I tried document.getElementById but that returns just the textarea and scrollHeight isnt a property.
Code:
function ChatInput(props){
const [text, setText]=useState();
function auto_grow(element){
element.target.style.height = "5px";
console.log(element)
element.target.style.height = (element.target.scrollHeight) + "px";
}
useEffect(() => {
setText(props.answer)
}, [props.answer])
return (
<>
<Container style={{paddingTop: '.5rem'}}>
<InputGroup>
<InputGroup.Text>Bot</InputGroup.Text>
<Form.Control onLoad={auto_grow} style={textareaStyle} as="textarea" value={text} aria-label="Chat Input"/>
</InputGroup>
</Container>
</>
)
}
const textareaStyle = {
resize: "none",
overflow: "hidden",
minHeight: "50px",
maxHeight: "1000px"
}
export default ChatInput;
英文:
I would presumably like to run the function auto_grow on useEffect but i require the element to be passed in to edit its values. Is there a way I can pass in the element without a listener so useEffect can make use of it?
I tried document.getElementById but that returns just the textarea and scrollHeight isnt a property.
Code:
function ChatInput(props){
const [text, setText]=useState();
function auto_grow(element){
element.target.style.height = "5px";
console.log(element)
element.target.style.height =(element.target.scrollHeight)+"px";
}
useEffect(()=>{
setText(props.answer)
},[props.answer])
return(
<>
<Container style={{paddingTop:'.5rem'}}>
<InputGroup>
<InputGroup.Text>Bot</InputGroup.Text>
<Form.Control onLoad={auto_grow}style={textareaStyle} as="textarea" value={text} aria-label="Chat Input"/>
</InputGroup>
</Container>
</>
)
}
const textareaStyle = {
resize: "none",
overflow: "hidden",
minHeight: "50px",
maxHeight: "1000px"
}
export default ChatInput;
答案1
得分: 2
你可以使用 ref 来获取底层元素。
import { useState, useEffect, useRef } from 'react';
// ...
function ChatInput(props) {
const ref = useRef();
// ref 使用示例：
useEffect(() => {
ref.current.style.height = ref.current.scrollHeight + 'px';
}, []);
// ...
return (
// 其他元素...
<Form.Control ref={ref} as="textarea" value={text} aria-label="Chat Input" />
);
}
英文:
You can use a ref to get the underlying element.
import { useState, useEffect, useRef } from 'react';
// ...
function ChatInput(props) {
const ref = useRef();
// ref usage example:
useEffect(() => {
ref.current.style.height = ref.current.scrollHeight + 'px';
}, []);
// ...
return (
// other elements...
<Form.Control ref={ref} as="textarea" value={text} aria-label="Chat Input" />
);
}
</details>
# 答案2
**得分**: 1
你错了。`scrollHeight` 是每个 DOM 元素的属性。
```javascript
var element = document.getElementById('test')
console.log(element.scrollHeight)
<body>
<div id="test">xxx</div>
</body>
英文:
you are mistaken. scrollHeight is a property of each dom element
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var element = document.getElementById('test')
console.log(element.scrollHeight)
<!-- language: lang-html -->
<body>
<div id = "test">xxx</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论