reactjs - 使用样式组件时使用 ref 引发错误聚焦反应输入
问题描述
当我点击一个按钮时,我试图专注于我的输入,如果我使用普通输入,那么当我点击按钮时它将专注于这个输入<button onClick={this.breite.setFocus}>FOCUS breite</button>
但是当我尝试添加ref={this.breite.ref}
到我的样式化组件输入时,我得到了错误Uncaught TypeError: ref.current.focus is not a function
如何添加this.breite.ref
到我的样式输入并将其集中在按钮单击上?
import React from "react";
import styled from 'styled-components'
const Box = styled.div`
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
${({ invalid }) => invalid && `
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
`}
margin: 0 10px 0 0;
`
const VCell = styled.div`
display: flex;
flex: 0 0 auto;
flex-direction: row;
`
const Cell = styled.div`
flex: 0 0 auto;
`
const Label = styled.div`
display:flex;
height: 100%;
font-weight: 700;
align-items: flex-end;
`
const HoverTooltip = styled.span`
display: none;
position: absolute;
height: auto;
width: 200px;
bottom: 30px;
right: -30px;
text-align: center;
padding: 5px;
z-index: 1;
color: #fff;
&:after {
content: " ";
position: absolute;
bottom: -5px; /* At the top of the tooltip */
left: 50%;
margin-bottom: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
`
const Input = styled.input`
margin: 3px 10px 0 10px !important;
height: auto !important;
outline: 0;
border: 0;
max-width: 100px;
padding: 2px 0;
border-bottom: 1px solid ${palette.darkGrey};
`
const HoverTooltipWrap = styled.span`
position: relative;
&:hover ${HoverTooltip} {
display: block;
}
`
const Tooltip = styled.div`
max-width: 80%;
`
const Units = styled.span`
display:flex;
height: 100%;
align-items: flex-end;
`
const Bohrfrei = styled.span`
position: absolute;
top: 4px;
left: 210px;
height: 20px;
width: 20px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
${media.large`
top: 4px;
right: -30px;
`}
`
const BohrfreiTooltip = styled.span`
display: none;
position: absolute;
top: -176px;
right: calc(50% - 30px);
height: auto;
width: auto;
border: 1px solid ${palette.orange};
text-align: center;
padding: 5px;
z-index: 1;
color: #fff;
background: #fff;
&:after {
content: " ";
position: absolute;
top: 100%;
left: 84%;
margin-top: 1px;
border-width: 6px;
border-style: solid;
border-color: ${palette.orange} transparent transparent transparent;
}
${media.large`
bottom: -150px;
right: -450px;
top: auto;
&:after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
left: -12px;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent ${palette.orange} transparent transparent;
}
`}
${Bohrfrei}:hover & {
display: block;
}
`
const Img = styled.img`
width: 213px;
height: 152px;
${media.large`
width: 426px;
height: 304px;
`}
`
const utilizeFocus = () => {
const ref = React.createRef()
const setFocus = () => {ref.current && ref.current.focus()}
return {setFocus, ref}
}
class DimensionBox extends React.Component {
constructor(props){
super(props)
this.inputFocus = utilizeFocus()
this.breite = utilizeFocus()
}
handleChange = (event) => {
this.props.onChange(event.target.value);
}
render() {
return (
<Box
invalid={!this.props.isValid}
type="number"
>
<VCell>
{/* <input ref={this.breite.ref}/> */}
<Cell>{this.props.priceFetching && console.log('fetching')}
<Label>{this.props.label}</Label>
</Cell>
<Cell>
<HoverTooltipWrap>
<Input
type="text"
innerRef={this.breite.ref}
ref={this.breite.ref}
id={(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
name={(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
value={this.props.value || '' }
onChange={this.handleChange}
onBlur={this.handleBlur}
disabled={this.props.priceFetching}
/>
{(this.props.label === 'Breite' || this.props.label === 'Breite 1' || this.props.label === 'Breite 2' || this.props.label === 'Breite 3' ||
this.props.label === 'Höhe' || this.props.label === 'Höhe 1' || this.props.label === 'Höhe 2') &&
<HoverTooltip>
{(this.props.label === 'Breite' || this.props.label === 'Breite 1' || this.props.label === 'Breite 2' || this.props.label === 'Breite 3') &&
<span>
{`Minimale Breite: ${this.props.minWidth}mm / Maximale Breite: ${this.props.maxWidth}mm`}
<br />
{`Bitte beachten Sie, dass bei maximaler Breite die maximale Höhe nicht höher sein darf ${this.props.maxHeightBei}mm `}
</span>
}
{(this.props.label === 'Höhe' || this.props.label === 'Höhe 1' || this.props.label === 'Höhe 2' )&&
<span>
{`Minimale Höhe: ${this.props.minHeight}mm / Maximale Höhe: ${this.props.maxHeight}mm`}
<br />
{`Bitte beachten Sie, dass bei maximaler Höhe die maximale Breite nicht breiter sein darf ${this.props.maxWidthBei}mm `}
</span>
}
{/* {this.props.label === 'Höhe 2' && `Minimale Höhe: ${this.props.minHeight}mm / Maximale Höhe: ${this.props.maxHeight}mm`} */}
{/* {this.props.label === 'Breite 3' && `Minimale Breite: ${this.props.minWidthSmallTop}mm / Maximale Breite: ${this.props.maxWidthSmallTop}mm`} */}
</HoverTooltip>
}
</HoverTooltipWrap>
</Cell>
<Cell>
<Units>mm</Units>
<button onClick={this.breite.setFocus}>
FOCUS breite
</button>
</Cell>
{this.props.label === 'FF* Höhe' &&
<div>
<Bohrfrei>?
<BohrfreiTooltip><Img src={bohrfrei}/></BohrfreiTooltip>
</Bohrfrei>
</div>
}
</VCell>
<VCell> <Tooltip>{this.props.tooltip}</Tooltip></VCell>
</Box>
);
}
};
export default DimensionBox;
解决方案
as per this answer: React Native _this2.refs.myinput.focus is not a function
I added a focus method
focus() {
this.refs.textInput.focus();
}
<Input ref={'textInput'} />
推荐阅读
- mongodb - 查询以加入 mongodb 中的两个嵌套集合
- machine-learning - 如何改善我的回归问题的准确性低?
- javascript - javascript,js图表循环问题
- android - livedata 中的函数观察者不起作用
- json - 在声明自定义 json 名称时初始化结构中的变量返回语法错误:意外文字
- flutter - 使用颤振登录 connectyCube 可能需要 5 到 10 秒
- ios - iOS14 中的 SwiftUI 键盘避免问题和 IgnoresSafeArea 修饰符问题
- jenkins - 詹金斯在 Windows 10 minikube 问题上
- flutter - Flutter 和 Android Studio:找不到 providerinstaller 的本地模块描述符类
- python - 将json文件中的两个字段添加到一个列表中,将两者都变成浮点数,其中一个字段变成负数