- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我编写了一个组件,该组件应该列出一堆带有相应文本字段的复选框。当您单击复选框或在字段中键入内容时,它意味着更新状态。
文本框工作正常,但当我在字段中输入时,它更新状态正常,但每当我点击键盘时我就会失去焦点。
我意识到这可能是因为没有设置键,所以我为所有内容都添加了键,但它仍然失去焦点。有一次我尝试在我的事件中添加 stopPropegation 因为我认为这可能会导致问题?我不确定..仍在学习中...似乎没有用,所以我也删除了那部分。
似乎仍然无法弄清楚是什么导致它失去焦点...有人对此问题有任何建议/解决方案吗?
我合并了我的代码并删除了不必要的部分以使其更易于阅读。有三个相关的 JS 文件..请看下面:
我仍然是初学者/学习者,所以如果您有与此代码的任何部分相关的有用建议,请随时提供。谢谢!
App.js
import React, { Component } from 'react';
import Form from './Form'
class App extends Component {
constructor() {
super();
this.state = {
mediaDeliverables: [
{label: 'badf', checked: false, quantity:''},
{label: 'adfadf', checked: false, quantity:''},
{label: 'adadf', checked: false, quantity:''},
{label: 'addadf', checked: false, quantity:''},
{label: 'adfdes', checked: false, quantity:''},
{label: 'hghdgs', checked: false, quantity:''},
{label: 'srtnf', checked: false, quantity:''},
{label: 'xfthd', checked: false, quantity:''},
{label: 'sbnhrr', checked: false, quantity:''},
{label: 'sfghhh', checked: false, quantity:''},
{label: 'sssddrr', checked: false, quantity:''}
]
}
}
setMediaDeliverable = (value, index) => {
let currentState = this.getStateCopy();
currentState.mediaDeliverables[index] = value;
this.setState(currentState);
}
getStateCopy = () => Object.assign({}, this.state);
render() {
return (
<div className="App">
<Form
key="mainForm"
mediaDeliverablesOptions={this.state.mediaDeliverables}
setMediaDeliverable={this.setMediaDeliverable}
/>
</div>
);
}
}
export default App;
表单.js
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import MediaDeliverablesCheckBox from './MediaDeliverablesCheckBox';
const useStyles = makeStyles(theme => ({
container: {
display: 'inline-block',
flexWrap: 'wrap',
},
root: {
display: 'inline-block',
flexWrap: 'wrap',
maxWidth: 600,
textAlign: 'left',
},
extendedIcon: {
marginRight: theme.spacing(1),
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
maxWidth: 300,
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 370,
},
dense: {
marginTop: 19,
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: 2,
},
noLabel: {
marginTop: theme.spacing(3),
},
}));
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
function getStyles(name, accountName, theme) {
// console.log('>> [form.js] (getStyles) ',accountName)
return {
fontWeight:
accountName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
export default function Form(props) {
const mediaDeliverablesOptions = props.mediaDeliverablesOptions;
const classes = useStyles();
const theme = useTheme();
const CheckboxGroup = ({ values, label, onChange }) => (
<FormControl component="fieldset">
<FormLabel component="legend">{label}</FormLabel>
<FormGroup>
{values.map((value, index) => (
<FormControlLabel
key={index}
control={
<Checkbox
checked={value.checked}
onChange={onChange(index)}
/>
}
label={value.label}
/>
))}
</FormGroup>
</FormControl>
);
const MediaDeliverableCheckBoxList = ({values, label}) => (
<FormControl component="fieldset">
<FormLabel component="legend">{label}</FormLabel>
<FormGroup>
{values.map((value, index) => (
<MediaDeliverablesCheckBox
key={index}
mediaDeliverablesOptions={value}
onMediaDeliverableChange={onMediaDeliverableChange(index)}
/>
))}
</FormGroup>
</FormControl>
);
const onCheckBoxChange = index => ({ target: { checked } }) => {
const newValues = [...values];
const value = values[index];
newValues[index] = { ...value, checked };
props.setDesignOrDigital(newValues);
};
const onMediaDeliverableChange = index => (deliverableData, e) => {
props.setMediaDeliverable(deliverableData, index);
}
return (
<div className={classes.root}>
<MediaDeliverableCheckBoxList
label="Please Choose Deliverables:"
values={mediaDeliverablesOptions}
key="media-deliverable-checkbox-list"
/>
</div>
);
}
MediaDeliverablesCheckbox.js
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import TextField from '@material-ui/core/TextField';
export default function MediaDeliverablesCheckBox(props) {
let deliverableData = Object.assign({}, props.mediaDeliverablesOptions);
const onCheckBoxChange = (e) => {
deliverableData.checked = e.target.checked;
props.onMediaDeliverableChange(deliverableData, e);
}
const onQuantityChange = (e) => {
deliverableData.quantity = e.target.value;
props.onMediaDeliverableChange(deliverableData, e);
}
const CheckboxGroup = ({ value, label }) => (
<FormControl component="fieldset">
<FormGroup>
<FormControlLabel
control={
<Checkbox
key={props.index}
checked={value.checked}
onChange={onCheckBoxChange}
/>
}
label={label}
/>
</FormGroup>
</FormControl>
);
return(
<div className="MediaDeliverablesCheckBox">
<CheckboxGroup
key={props.index}
label={props.mediaDeliverablesOptions.label}
value={props.mediaDeliverablesOptions}
/>
<TextField
key={'tf'+props.index}
id={'quantity-'+props.index}
label="Quantity"
placeholder="How many do you need?"
multiline
variant="outlined"
value={props.mediaDeliverablesOptions.quantity}
onChange={onQuantityChange}
fullWidth
/>
</div>
);
}
根据 Ryan C 推荐的编辑更新了 Form.js。
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import MediaDeliverablesCheckBox from './MediaDeliverablesCheckBox';
const useStyles = makeStyles(theme => ({
container: {
display: 'inline-block',
flexWrap: 'wrap',
},
root: {
display: 'inline-block',
flexWrap: 'wrap',
maxWidth: 600,
textAlign: 'left',
},
extendedIcon: {
marginRight: theme.spacing(1),
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
maxWidth: 300,
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 370,
},
dense: {
marginTop: 19,
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: 2,
},
noLabel: {
marginTop: theme.spacing(3),
},
}));
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
function getStyles(name, accountName, theme) {
return {
fontWeight:
accountName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
// Failed to compile
// ./src/Form.js
// Line 86: Parsing error: Unexpected token, expected ","
// 84 |
// 85 | const MediaDeliverableCheckBoxList = ({values, label, onMediaDeliverableChange}) => (
// > 86 | {values.map((value, index) => (
// | ^
// 87 | <MediaDeliverablesCheckBox
// 88 | key={index}
// 89 | index={index}
// This error occurred during the build time and cannot be dismissed.
const MediaDeliverableCheckBoxList = ({values, label, onMediaDeliverableChange}) => (
{values.map((value, index) => (
<MediaDeliverablesCheckBox
key={index}
index={index}
mediaDeliverablesOptions={value}
onMediaDeliverableChange={onMediaDeliverableChange(index)}
/>
))}
);
export default function Form(props) {
const mediaDeliverablesOptions = props.mediaDeliverablesOptions;
const classes = useStyles();
const theme = useTheme();
const CheckboxGroup = ({ values, label, onChange }) => (
<FormControl component="fieldset">
<FormLabel component="legend">{label}</FormLabel>
<FormGroup>
{values.map((value, index) => (
<FormControlLabel
key={index}
control={
<Checkbox
checked={value.checked}
onChange={onChange(index)}
/>
}
label={value.label}
/>
))}
</FormGroup>
</FormControl>
);
const onCheckBoxChange = index => ({ target: { checked } }) => {
const newValues = [...values];
const value = values[index];
newValues[index] = { ...value, checked };
props.setDesignOrDigital(newValues);
};
const onMediaDeliverableChange = index => (deliverableData, e) => {
props.setMediaDeliverable(deliverableData, index);
}
return (
<div className={classes.root}>
<MediaDeliverableCheckBoxList
onMediaDeliverableChange={onMediaDeliverableChange}
/>
</div>
);
}
最佳答案
我看到两个主要问题:
你有以下结构(省略与我的观点没有直接关系的细节):
export default function Form(props) {
const onMediaDeliverableChange = index => (deliverableData, e) => {
props.setMediaDeliverable(deliverableData, index);
}
const MediaDeliverableCheckBoxList = ({values, label}) => (
<FormGroup>
{values.map((value, index) => (
<MediaDeliverablesCheckBox key={index} onMediaDeliverableChange={onMediaDeliverableChange(index)}/>
))}
</FormGroup>
);
return (
<MediaDeliverableCheckBoxList/>
);
}
函数MediaDeliverableCheckBoxList
表示用于呈现 <MediaDeliverableCheckBoxList/>
的组件类型元素。每当Form
由于 Prop 或状态改变而重新渲染,React 将重新渲染其子级。如果特定子项的组件类型相同(加上一些其他条件,例如 key
如果指定相同),那么它将更新现有的 DOM 节点。如果特定子项的组件类型不同,则相应的 DOM 节点将被删除,并将新节点添加到 DOM。
通过定义 MediaDeliverableCheckBoxList
组件类型在 Form
功能,您导致该组件类型在每次渲染时都不同。这将导致所有 DOM 节点被替换而不仅仅是更新,这将导致焦点在先前具有焦点的 DOM 节点被移除时消失。它还会导致性能显着下降。
您可以通过将此组件类型移出 Form
来解决此问题函数,然后添加所需的任何其他 Prop (例如 onMediaDeliverableChange
)以传达 Form
内部已知的上下文.您还需要将索引作为 Prop 传递给 MediaDeliverablesCheckBox
因为它正在使用它。
const MediaDeliverableCheckBoxList = ({values, label, onMediaDeliverableChange}) => (
<FormGroup>
{values.map((value, index) => (
<MediaDeliverablesCheckBox key={index} index={index} onMediaDeliverableChange={onMediaDeliverableChange(index)}/>
))}
</FormGroup>
);
export default function Form(props) {
const onMediaDeliverableChange = index => (deliverableData, e) => {
props.setMediaDeliverable(deliverableData, index);
}
return (
<MediaDeliverableCheckBoxList onMediaDeliverableChange={onMediaDeliverableChange}/>
);
}
您对 CheckboxGroup
也有同样的问题可能还有其他组件。
关于javascript - React 初学者问题 : Textfield Losing Focus On Update,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56873912/
我不明白为什么我会从 GHCi 得到以下回复。不是Maybe构造函数? Prelude> :t Maybe :1:1: Not in scope: data constructor `Maybe' P
场景是我在此网站上有不同的访问级别,我有一个适用于所有有效用户的简单登录流程,但是我现在尝试分隔不同的用户以实现对页面的不同访问。 这是我页面开头的代码: // CHECKS IF THE USER
我的任务是:写下数字1-100。如果该数字可以被 3 整除,则将其写入数字“它可以被 3 整除”旁边的控制台。如果数字是 5,也将其写入数字旁边的控制台“它可以被 5 整除”,如果它不能被 3 整除,
我有一堆实现协议(protocol) P 的记录 (A B C)。 我想编写一个方法,该方法将选择一种记录类型,构造它,然后调用它的方法。 例如,如果我有一个记录列表(def types '(A B
我的任务是编写一个程序,根据以下三个因素来预测您的年度燃料使用量汽车加油。我必须使用两个单独的类。这是我的第一个类,名为 AnnualFuelUse。 public class AnnualFuelU
我是 JavaScript 新手。我已经通过 Learning JavaScript (o'reilly) 完成了我的工作,但我只是想制作我的第一个 JavaScript。 我认为最好从事我感兴趣的事
我真的刚刚开始学习如何用 Python 编写代码。我有兴趣 如何重现 u[x,t] 矩阵。我尝试了 return u,它抛出了一个错误。 如果此代码中 for 循环的位置正确并正常运行。 最重要的是,
我不明白 view("") 在作为 Model 对象一部分的以下 javascript 方法中的作用: addView: function(view) { this.views
所以我正在尝试将 AppKit 导入到我的 python 项目中。我正在使用 pyCharm,但每次我尝试导入时,都会收到以下错误消息: You are using pip version 6.0.8
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
好吧,不知道在哪里问这个,但我是一个初学者程序员,使用 Perl。我需要创建一个数组数组,但我不确定使用数组/哈希引用、哈希数组或数组哈希等是否更好。 我需要一组匹配项:@totalmatches 每
我最近开始学习 PHP。我做了一个基本的网站,基本上想给它密码。如果有人能告诉我为什么这不起作用,我将不胜感激。我知道它不起作用,因为我已经尝试过了;我只是不明白为什么。 ... REST OF W
我试图理解 C 中的整个指针和取消引用。我几乎明白了,但遇到了非常简单的代码,结果我不明白: char *ptr = "Characters"; char val = *ptr; char *chrp
首先,我有这个列表(在练习中建议): Members = [('Tessa','G1'),('Evan','G2'),('Tom','G3'), ('Mia','G3'),('Claire','G3'
我有以下列表: listofanimals = ['Dog', 'Cat', 'Frog', 'Tiger', 'Sheep', 'Lion'] 我想根据字典对这个列表进行排序: score_card
1 userID = floatval($userID); 13 } else { 14 $this->userID = floatval(
我是 R 新手,遇到了一段我不理解的代码。更具体地说,我想知道 .Internal做。这是我尝试转换为 Matlab 的示例: dunif 我想知道.Internal和 做。 非常感谢您, 西蒙 最
我是一名优秀的程序员,十分优秀!