我从@material-ui/[email protected] 更新到@material-ui/[email protected]。由于这样做，我的所有 TextField 都必须单击两次才能显示列表。该问题似乎与版本更新无关，因为如果切换回 v4.9.1 版本问题仍然存在。
包.json
"dependencies": {
"@material-ui/core": "4.10.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.4.1",
.js 文件
let getBoards = () => {
const client = new GraphQLClient(url, {
headers: {
Authorization: token,
},
})
const query = `{
boards() {
id
name
owner {
id
name
}
}
}`
client.request(query)
.then(data => {
console.log('data: ', data)
let tempArray = [];
for (let i = 0; i < data.boards.length; i++) {
if (data.boards[i].name.indexOf('INT') > -1) {
tempArray.push({
id: data.boards[i].id,
name: data.boards[i].name
})
}
}
let compare = (a, b) => {
// Use toUpperCase() to ignore character casing
const nameA = a.name.toUpperCase();
const nameB = b.name.toUpperCase();
let comparison = 0;
if (nameA > nameB) {
comparison = 1;
} else if (nameA < nameB) {
comparison = -1;
}
return comparison;
}
setBoards(tempArray.sort(compare));
})
}
<TextField
required
error={state.typeErrorBoard}
select
label="Select board"
className={props.classes.textField}
variant="filled"
value={state.BoardName}
onClick={getBoards}
onChange={e => handleBoardChange(e)}
margin="dense"
>
{boards.map((board, index) =>
<MenuItem
key={index}
value={board.name}
>
{board.name}
</MenuItem>
)}
</TextField>
当您为Textfield提供select 道具时，您基本上是在渲染一个select而不是 Textfield。
查看源代码
...
{select ? (
<Select
aria-describedby={helperTextId}
id={id}
labelId={inputLabelId}
value={value}
input={InputElement}
{...SelectProps}
>
{children}
</Select>
) : (
InputElement
)}
...
select它只会呈现（占据整个屏幕），因此getBoards不会被执行。getBoards将调用函数，因为 select 现在位于 dom 中，onClick 处理程序 (getBoards) 也是如此。e.target（最初附加事件的位置）和e.currentTarget（从触发事件的位置）来检查getBoards要使其通过单击工作，您可以执行以下任一操作：
getBoards代码片段
export default function MultilineTextFields(props) {
const classes = useStyles();
const [boards, setBoards] = React.useState([]);
let getBoards = e => {
console.log("e", e.target);
console.log("e cur", e.currentTarget);
e.stopPropagation();
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(res => {
console.log("boards", res);
setBoards(res);
});
};
// useEffect(() => getBoards(), []); //<----another solution
return (
// <div onClick={getBoards}> //<----another solution (don't click on text-input , click on the padding)
<div>
<TextField
required
// error={state.typeErrorBoard}
select
label="Select board"
className={classes.root}
variant="filled"
value={""}
onClick={getBoards}
// onFocus={getBoards} //<----another solution
// onChange={e => handleBoardChange(e)}
margin="dense"
>
{boards &&
boards.map((board, index) => (
<MenuItem key={index} value={board.username}>
{board.username}
</MenuItem>
))}
</TextField>
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句