如何在我的 React 组件中组合 onBlur 和 onFocus 而无需重新选择我输入的每个字母的文本?
How can I combine onBlur and onFocus in my React Component without reselecting the text on every letter I type in?
我有一个简单的文本输入,如下所示:
<input
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
handleFocus
就是这样做的 e.target.select()
onBlur
只是发送一个动作。 (并设置状态,使其不再显示输入)
问题出在 handleFocus
我认为与 onBlur
一起使用效果不太好。
每次我在文本字段中键入它只是写一个字母并重新选择该字母。
所以就像每次更改 onSelect 运行s.
当我摆脱 onFocus
道具时,一切都按预期工作(简单的反应控制输入 - 它从状态获取值,并将状态设置为 onChange)。
为什么会发生这种情况,我该如何预防?
我尝试了不同的 e.preventDefault
功能,但都没有用。我的意思是,当我只是在文本字段中输入内容时,onBlur
甚至不应该 运行。但是 onSelect 确实如此,但我只想 运行 在组件(输入)最初呈现时这样做。
下面是一个示例:https://codesandbox.io/s/7y66ykqn2q?fontsize=14
这是回购 分支:CRUD : https://github.com/SelfDevTV/trello-clone/tree/CRUD
这与我在 github 上使用的代码相同,但可以在 Codesandbox 中使用:https://codesandbox.io/s/q3o7zjjjqw
提前谢谢大家!
好的,我修好了。 错误来自 styled-components
该错误与文档的这一部分有关:
https://www.styled-components.com/docs/basics#coming-from-css
"Define Styled Components outside of the render method"
起初组件看起来像这样:
const TrelloList = ({ title, cards, listID, index, dispatch }) => {
const [isEditing, setIsEditing] = useState(false);
const [listTitle, setListTitle] = useState(title);
const StyledInput = styled.input`
width: 100%;
border: none;
outline-color: blue;
border-radius: 3px;
margin-bottom: 3px;
padding: 5px;
`;
const renderEditInput = () => {
return (
<StyledInput
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
);
};
// other stuff
现在我把它改成了这样:
const StyledInput = styled.input`
width: 100%;
border: none;
outline-color: blue;
border-radius: 3px;
margin-bottom: 3px;
padding: 5px;
`;
const TrelloList = ({ title, cards, listID, index, dispatch }) => {
const [isEditing, setIsEditing] = useState(false);
const [listTitle, setListTitle] = useState(title);
const renderEditInput = () => {
return (
<StyledInput
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
);
};
// other stuff
这完全解决了问题,因此节点不会在每次重新渲染时被删除。所以这是我的错,我应该更深入地阅读 styled-components
文档。
我有一个简单的文本输入,如下所示:
<input
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
handleFocus
就是这样做的 e.target.select()
onBlur
只是发送一个动作。 (并设置状态,使其不再显示输入)
问题出在 handleFocus
我认为与 onBlur
一起使用效果不太好。
每次我在文本字段中键入它只是写一个字母并重新选择该字母。 所以就像每次更改 onSelect 运行s.
当我摆脱 onFocus
道具时,一切都按预期工作(简单的反应控制输入 - 它从状态获取值,并将状态设置为 onChange)。
为什么会发生这种情况,我该如何预防?
我尝试了不同的 e.preventDefault
功能,但都没有用。我的意思是,当我只是在文本字段中输入内容时,onBlur
甚至不应该 运行。但是 onSelect 确实如此,但我只想 运行 在组件(输入)最初呈现时这样做。
下面是一个示例:https://codesandbox.io/s/7y66ykqn2q?fontsize=14
这是回购 分支:CRUD : https://github.com/SelfDevTV/trello-clone/tree/CRUD
这与我在 github 上使用的代码相同,但可以在 Codesandbox 中使用:https://codesandbox.io/s/q3o7zjjjqw
提前谢谢大家!
好的,我修好了。 错误来自 styled-components
该错误与文档的这一部分有关:
https://www.styled-components.com/docs/basics#coming-from-css
"Define Styled Components outside of the render method"
起初组件看起来像这样:
const TrelloList = ({ title, cards, listID, index, dispatch }) => {
const [isEditing, setIsEditing] = useState(false);
const [listTitle, setListTitle] = useState(title);
const StyledInput = styled.input`
width: 100%;
border: none;
outline-color: blue;
border-radius: 3px;
margin-bottom: 3px;
padding: 5px;
`;
const renderEditInput = () => {
return (
<StyledInput
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
);
};
// other stuff
现在我把它改成了这样:
const StyledInput = styled.input`
width: 100%;
border: none;
outline-color: blue;
border-radius: 3px;
margin-bottom: 3px;
padding: 5px;
`;
const TrelloList = ({ title, cards, listID, index, dispatch }) => {
const [isEditing, setIsEditing] = useState(false);
const [listTitle, setListTitle] = useState(title);
const renderEditInput = () => {
return (
<StyledInput
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
);
};
// other stuff
这完全解决了问题,因此节点不会在每次重新渲染时被删除。所以这是我的错,我应该更深入地阅读 styled-components
文档。